feat: add plugin panel displays or hides plugin #1322
Conversation
WalkthroughThis update introduces a new toolbar plugin called Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant Toolbar as PluginToggle Toolbar
participant PluginMenu as Plugin Menu
participant Layout as Layout API
User->>Toolbar: Clicks PluginToggle button
Toolbar->>PluginMenu: Show dropdown menu
User->>PluginMenu: Hover left/right panel item
PluginMenu->>PluginMenu: Show submenu with plugins
User->>PluginMenu: Clicks a plugin item
PluginMenu->>Layout: Toggle plugin visibility
Layout-->>PluginMenu: Update state
PluginMenu-->>Toolbar: Update menu/checkmark
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
🧹 Nitpick comments (9)
packages/toolbars/plugin-toggle/meta.js (1)
1-12: Metadata configuration follows the project's conventionsThe metadata is properly structured with the correct ID format, type, title, and rendering options. The configuration sets it to render as an icon and be initially collapsed, which aligns with the PR description.
Consider adding a descriptive title that better reflects the component's purpose of toggling plugin panels, which would improve discoverability in the UI.
- title: 'pluginToggle', + title: 'Toggle Plugin Panels',packages/toolbars/plugin-toggle/src/Main.vue (4)
3-3: Consider internationalization for UI text.The UI text "插件显示隐藏" (Plugin Show/Hide) is hardcoded in Chinese. Consider using internationalization to support multiple languages.
- <ToolbarBase content="插件显示隐藏" :icon="options.icon.default || options.icon" :options="options" /> + <ToolbarBase :content="$t('toolbar.pluginToggle')" :icon="options.icon.default || options.icon" :options="options" />
7-10: Consider internationalization for menu items.Menu item texts are hardcoded in Chinese. Consider using internationalization for better maintainability and multilingual support.
- <span>左侧面板</span> + <span>{{ $t('toolbar.leftPanel') }}</span> ... - <span>右侧面板</span> + <span>{{ $t('toolbar.rightPanel') }}</span>Also applies to: 28-31
11-26: Add keyboard navigation for improved accessibility.The current implementation only supports mouse interactions. Consider adding keyboard navigation for better accessibility.
Add keyboard support by implementing arrow key navigation, ENTER for selection, and ESC to close the menu:
<div v-if="isMenuVisible" class="plugin-menu" :style="menuPosition" @click.stop + @keydown.down.prevent="navigateMenu('next')" + @keydown.up.prevent="navigateMenu('prev')" + @keydown.enter.prevent="selectFocusedItem" + @keydown.esc.prevent="closeMenu" + tabindex="0" + ref="menuRef">Add corresponding navigation methods in the composable.
Also applies to: 32-47
90-99: Add aria attributes for improved accessibility.Enhance accessibility by adding ARIA attributes to the menu components.
.plugin-menu { position: fixed; background: white; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); z-index: 1000; min-width: 92px; user-select: none; + role: "menu"; + aria-labelledby: "plugin-toggle-button"; }Also add corresponding aria attributes to menu items.
packages/toolbars/plugin-toggle/src/composable/index.ts (4)
36-39: Avoid hardcoded positioning constants.The menu positioning constants (
MENU_OFFSETandSUBMENU_OFFSET) are hardcoded and may not work well across different screen sizes and layouts.// 菜单位置的常量 -const MENU_OFFSET = 17 -const SUBMENU_OFFSET = 258 +const MENU_OFFSET = 17 +const SUBMENU_OFFSET = 258 + +// Responsive positioning based on screen size +const getResponsiveOffset = (baseOffset: number) => { + const screenWidth = window.innerWidth + if (screenWidth < 768) { + return Math.floor(baseOffset * 0.8) + } + return baseOffset +}Then use
getResponsiveOffset(MENU_OFFSET)instead of direct constants in positioning calculations.
66-79: Redundant showMenu method.The
showMenumethod is not used anywhere in the code, and its functionality is already covered bytoggleMenu.-// 显示菜单 -const showMenu = (event: MouseEvent) => { - if (!toggleRef.value) return - - const rect = toggleRef.value.getBoundingClientRect() - menuPosition.value = { - position: 'fixed', - top: `${rect.top}px`, - right: `${window.innerWidth - rect.left + MENU_OFFSET}px`, - transform: 'translateX(0)' - } - isMenuVisible.value = true - event.stopPropagation() -}Don't forget to remove it from the return object as well:
return { isPluginShown, isMenuVisible, showLeftMenu, showRightMenu, toggleRef, menuPosition, leftPlugins, rightPlugins, submenuStyle, - showMenu, toggleMenu, showLeftPlugins, showRightPlugins, togglePlugin }
121-133: Add debounce to click handler for better performance.The
handleClickOutsidefunction is attached to document click events and could benefit from debouncing to improve performance.+import { debounce } from '@opentiny/tiny-engine-utils' // ... -const handleClickOutside = (event: MouseEvent) => { +const handleClickOutside = debounce((event: MouseEvent) => { // 检查点击目标是否在菜单区域内 const isClickInMenu = (event.target as Element)?.closest('.plugin-menu') || (event.target as Element)?.closest('.submenu') // 如果点击的不是菜单区域，并且不是切换按钮本身，则隐藏菜单 if (!isClickInMenu && (!toggleRef.value || !toggleRef.value.contains(event.target as Node))) { isMenuVisible.value = false showLeftMenu.value = false showRightMenu.value = false } -} +}, 50)
135-143: Add window resize event handler for menu repositioning.The current implementation doesn't handle window resize events, which could cause menu positioning issues.
+const handleResize = debounce(() => { + if (isMenuVisible.value && toggleRef.value) { + const rect = toggleRef.value.getBoundingClientRect() + menuPosition.value = { + position: 'fixed', + top: `${rect.top}px`, + right: `${window.innerWidth - rect.left + MENU_OFFSET}px`, + transform: 'translateX(0)' + } + } +}, 150) onMounted(() => { document.addEventListener('click', handleClickOutside) + window.addEventListener('resize', handleResize) }) onBeforeUnmount(() => { document.removeEventListener('click', handleClickOutside) + window.removeEventListener('resize', handleResize) })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
packages/design-core/assets/plugin-toggle.svgis excluded by!**/*.svg
📒 Files selected for processing (12)
designer-demo/registry.js(3 hunks)packages/build/vite-config/src/vite-plugins/devAliasPlugin.js(1 hunks)packages/design-core/index.js(1 hunks)packages/design-core/package.json(1 hunks)packages/layout/src/Main.vue(1 hunks)packages/toolbars/plugin-toggle/index.ts(1 hunks)packages/toolbars/plugin-toggle/meta.js(1 hunks)packages/toolbars/plugin-toggle/package.json(1 hunks)packages/toolbars/plugin-toggle/src/Main.vue(1 hunks)packages/toolbars/plugin-toggle/src/composable/index.ts(1 hunks)packages/toolbars/plugin-toggle/vite.config.ts(1 hunks)tsconfig.app.json(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/toolbars/plugin-toggle/src/composable/index.ts (1)
packages/register/src/hooks.ts (1)
useLayout(76-76)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: push-check
🔇 Additional comments (14)
packages/layout/src/Main.vue (1)
112-112: Great addition of title property to support the new plugin toggle featureAdding the title property from the plugin items will allow the new PluginToggle toolbar component to display meaningful names in its dropdown menus.
packages/design-core/index.js (1)
15-15: Clean export of the new PluginToggle componentThis export properly integrates the new plugin toggle feature into the design core package's public API, following the established pattern for toolbar plugins.
packages/design-core/package.json (1)
82-82: Good dependency addition for the new plugin toggle packageThe workspace protocol dependency is correctly added and follows the same pattern as other internal dependencies.
packages/build/vite-config/src/vite-plugins/devAliasPlugin.js (1)
44-44: Correctly configured development alias for the new plugin toggle packageThe alias is properly added to the development environment configuration, ensuring consistent imports and module resolution during development.
tsconfig.app.json (1)
49-49: Path alias correctly added for the new plugin toggle moduleThe new path alias for "@opentiny/tiny-engine-toolbar-plugin-toggle" follows the established pattern for other toolbar components in the project, making the module properly accessible throughout the codebase.
packages/toolbars/plugin-toggle/index.ts (1)
1-20: Implementation follows standard pattern for toolbar componentsThe module exports the correct structure with metadata and entry component, consistent with other toolbar components in the project. The file properly imports the Vue component, metadata, and styles.
designer-demo/registry.js (3)
25-25: PluginToggle component correctly importedThe PluginToggle component is properly imported from the main engine package, following the pattern of other toolbar components.
78-78: PluginToggle appropriately added to collapse sectionThe plugin is correctly positioned in the collapse section of the toolbar layout, which aligns with the PR description of a "..." button that controls panel visibility.
101-101: PluginToggle properly registered in toolbars arrayThe PluginToggle component is correctly added to the exported toolbars array, making it available to the system alongside other toolbar components.
packages/toolbars/plugin-toggle/vite.config.ts (1)
13-35: Configuration looks good, follows project standards.The Vite configuration is properly set up for the plugin-toggle toolbar package with appropriate plugins, build options, and external dependencies.
packages/toolbars/plugin-toggle/package.json (1)
1-43: Package configuration is appropriate.The package structure, dependencies, and configuration follow project standards.
packages/toolbars/plugin-toggle/src/Main.vue (2)
52-82: The script section is well-structured and concise.The script section effectively imports necessary components, defines props, and extracts the required methods and state from the composable.
84-172: CSS styles are well organized and functional.The styles provide a clean, consistent interface with appropriate hover effects and visual hierarchy.
packages/toolbars/plugin-toggle/src/composable/index.ts (1)
19-171: Overall, the composable is well structured.The composable effectively manages the state and behavior of the plugin toggle functionality with good separation of concerns.
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