Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add block panel can't open #827

Merged
merged 3 commits into from
Sep 28, 2024

Conversation

chilingling
Copy link
Member

@chilingling chilingling commented Sep 28, 2024

English | 简体中文

PR

PR Checklist

Please check if your PR fulfills the following requirements:

  • The commit message follows our Commit Message Guidelines
  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been added / updated (for bug fixes / features)
  • Built its own designer, fully self-validated

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Other... Please describe:

Background and solution

  1. 修复区块消费侧添加分组面板无法打开的 bug
  2. 修复区块消费侧添加分组点击无法生效的 bug
  3. 修复区块消费侧分组没有区块的时候,不显示添加按钮的 bug

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

Summary by CodeRabbit

  • New Features

    • Enhanced user interaction handling in the Plugin Block List, allowing the display of the block list even when there are no data items.
    • Introduced a new editBlock event for clearer editing actions.
  • Improvements

    • Updated event handling in the Main component to use the new editBlock event for better clarity.
    • Improved property handling in BlockPanel for enhanced flexibility with class bindings.
  • Refactor

    • Simplified component interfaces by removing unnecessary props and replacing static references with dynamic class bindings.

Copy link
Contributor

coderabbitai bot commented Sep 28, 2024

Walkthrough

The changes across various components focus on enhancing user interaction and refining event handling. Key modifications include the introduction of a new editBlock method for clearer event management in PluginBlockList.vue, adjustments to property definitions in BlockPanel.vue, and the removal of redundant props in Main.vue. These updates improve the structure and functionality of the components, ensuring a more intuitive user experience.

Changes

File Path Change Summary
packages/common/component/PluginBlockList.vue Updated rendering conditions for the block list and refined event handling by introducing editBlock method and adjusting emitted events.
packages/plugins/block/src/Main.vue Changed event listener from @click to @editBlock for the <plugin-block-list> component, enhancing specificity in event handling.
packages/plugins/materials/src/meta/block/src/BlockPanel.vue Updated activeTabName to include default values and modified teleport component attributes for future compatibility, enhancing flexibility.
packages/plugins/materials/src/meta/block/src/Main.vue Removed props activeTabName and rightPanelRef, resulting in a simplified component interface.
packages/plugins/materials/src/meta/layout/src/Main.vue Changed rightPanelRef to a class binding with rightPanelClassName, introducing a new constant for class name management.

Possibly related PRs

Suggested labels

ospp-2024

Suggested reviewers

  • lizhijie429
  • hexqi

Poem

🐰 In the meadow where plugins play,
New features hop in a joyful way.
Events now dance, clear as can be,
With buttons and blocks, oh so free!
A sprinkle of code, a dash of delight,
Let's celebrate changes, all day and night! 🌼


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 967ec45 and 4a99ce7.

📒 Files selected for processing (1)
  • packages/plugins/materials/src/meta/block/src/BlockPanel.vue (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/plugins/materials/src/meta/block/src/BlockPanel.vue

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?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions github-actions bot added bug Something isn't working refactor-main refactor/develop branch feature labels Sep 28, 2024
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (5)
packages/plugins/materials/src/meta/layout/src/Main.vue (2)

9-13: LGTM! Consider a minor improvement for clarity.

The change from :rightPanelRef to :rightPanelClassName is a good approach to address the issue with the block panel. Using a class name instead of a ref provides more flexibility in styling and manipulation.

For improved clarity, consider using an explicit string concatenation instead of a template literal:

- :rightPanelClassName="`.${rightPanelClassName}`"
+ :rightPanelClassName="'.' + rightPanelClassName"

This makes it clearer that we're passing a CSS selector string.


17-17: LGTM! Consider a minor adjustment for consistency.

The addition of a new div element with a dynamic class binding for the right panel is a good approach. This change likely contributes to resolving the issue with the block panel not opening.

For consistency with the earlier change, consider using the same class name format:

- <div :class="rightPanelClassName"></div>
+ <div :class="'.' + rightPanelClassName"></div>

This ensures that the class selector is consistent throughout the component.

packages/plugins/block/src/Main.vue (2)

92-92: Improved event handling for editing blocks.

The change from @click to @editBlock is a good improvement. It provides better semantics and likely resolves the issue where the block panel couldn't open. This change ensures that the edit action is triggered only when intended, rather than on any click event.

Consider adding error handling in the editBlock method to gracefully handle any potential errors during the block refresh or initialization process. For example:

const editBlock = async (block) => {
  try {
    const isEdite = true
    if (isSaved()) {
      await refreshBlockData(block)
      useBlock().initBlock(block, {}, isEdite)
      useLayout().closePlugin()
      closePanel()
      const url = new URL(window.location)
      url.searchParams.delete('pageid')
      url.searchParams.set('blockid', block.id)
      window.history.pushState({}, '', url)
    } else {
      confirm({
        message: '当前画布内容尚未保存,是否要继续切换?',
        exec: async () => {
          await refreshBlockData(block)
          useBlock().initBlock(block, {}, isEdite)
          useLayout().closePlugin()
          closePanel()
        }
      })
    }
  } catch (error) {
    console.error('Error editing block:', error)
    // Handle the error appropriately, e.g., show an error message to the user
  }
}

Line range hint 1-24: Consider extracting block list rendering logic.

The <plugin-block-list> component seems to handle a lot of functionality. To improve maintainability and reusability, consider extracting the block list rendering logic into a separate component. This would make the main component less complex and easier to manage.

You could create a new component, for example, BlockList.vue, and move the relevant template and logic there:

<!-- BlockList.vue -->
<template>
  <plugin-block-list
    class="plugin-block-list"
    :data="blockList"
    :isBlockManage="true"
    :showBlockShot="true"
    :blockStyle="layout"
    default-icon-tip="查看区块"
    :externalBlock="externalBlock"
    @editBlock="editBlock"
    @iconClick="openSettingPanel"
  ></plugin-block-list>
</template>

<script>
export default {
  props: ['blockList', 'layout', 'externalBlock'],
  methods: {
    editBlock(block) {
      this.$emit('editBlock', block)
    },
    openSettingPanel(data) {
      this.$emit('openSettingPanel', data)
    }
  }
}
</script>

Then, in your main component:

<template>
  <!-- ... other code ... -->
  <block-list
    :blockList="state.blockList"
    :layout="state.layout"
    :externalBlock="externalBlock"
    @editBlock="editBlock"
    @openSettingPanel="openSettingPanel"
  ></block-list>
  <!-- ... other code ... -->
</template>

<script>
import BlockList from './BlockList.vue'

export default {
  components: {
    // ... other components ...
    BlockList
  },
  // ... rest of your component logic ...
}
</script>

This refactoring would improve the overall structure and maintainability of your code.

Also applies to: 89-95

packages/common/component/PluginBlockList.vue (1)

266-268: Implemented edit functionality for blocks

The blockClick method has been simplified, and a new editBlock method has been added. This change separates the concerns of clicking and editing blocks, improving the code's clarity and maintainability. The editBlock method is also properly added to the returned object.

Consider adding a comment to explain the purpose of the editBlock method and its parameters for better code documentation. For example:

+ // Handle the editing of a block
+ // event: The triggering event
+ // item: The block item being edited
+ // index: The index of the block in the list
const editBlock = ({ event, item, index }) => {
  if (props.isBlockManage) {
    state.activeIndex = index
  }

  emit('editBlock', item)
  // 点击区块并不打开设置面板
  emit('iconClick', { event, item, index, isOpen: false })
}

Also applies to: 270-277, 369-369

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between f02d458 and 967ec45.

📒 Files selected for processing (5)
  • packages/common/component/PluginBlockList.vue (8 hunks)
  • packages/plugins/block/src/Main.vue (1 hunks)
  • packages/plugins/materials/src/meta/block/src/BlockPanel.vue (2 hunks)
  • packages/plugins/materials/src/meta/block/src/Main.vue (1 hunks)
  • packages/plugins/materials/src/meta/layout/src/Main.vue (3 hunks)
🔇 Additional comments (15)
packages/plugins/materials/src/meta/block/src/Main.vue (2)

13-13: LGTM, but verify impact on related components.

The removal of activeTabName and rightPanelRef props simplifies this component's interface. However, please ensure the following:

  1. Verify that the BlockPanel component doesn't rely on these props for its functionality.
  2. Check if any parent components are still passing these props unnecessarily.
  3. Update component documentation to reflect this change in the component's API.

To verify the usage of these props in the BlockPanel component and potential parent components, run the following script:

If these tests return results, it indicates that further adjustments may be needed in the related components.


Line range hint 1-24: Provide more context on how this change addresses the PR objective.

While this change simplifies the component, it's not immediately clear how it contributes to fixing the issue of the block panel not opening. Could you please provide more context on:

  1. How this change relates to the block panel opening issue?
  2. Are there other changes in different files that work together with this modification to solve the problem?
  3. Have you tested that the block panel now opens correctly after this change?

This additional information will help reviewers better understand the full scope and impact of the PR.

To help verify if this is the only change related to the block panel, you can run the following script:

This will show any other files that mention the block panel and have been changed in this PR, which might provide more context on the full solution.

✅ Verification successful

To accurately check for other changes related to the block panel, please run the following script:


Multiple related files have been modified.

The PR includes changes not only in Main.vue but also in BlockPanel.vue, BlockList.vue, and BlockGroup.vue. This indicates a more comprehensive approach to addressing the block panel functionality. Please ensure that all these changes collectively resolve the issue of the block panel not opening and have been thoroughly tested.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for other changes related to the block panel

echo "Checking for other changes related to the block panel:"
git diff --name-only | xargs rg --type vue 'block-panel|BlockPanel'

Length of output: 311


Script:

# 
#!/bin/bash
# Description: Check for other changes related to the block panel

echo "Checking for other changes related to the block panel:"
git diff --name-only | xargs rg --glob "*.vue" 'block-panel|BlockPanel'

Length of output: 1476

packages/plugins/materials/src/meta/layout/src/Main.vue (3)

28-29: LGTM! Good use of a constant for the class name.

The introduction of the rightPanelClassName constant is a good practice. It centralizes the definition of the class name, making it easier to maintain and update if needed in the future. The naming is clear and descriptive.


85-85: LGTM! Necessary addition for template usage.

The addition of rightPanelClassName to the returned object in the setup function is correct and necessary. This makes the constant available for use in the template, which is consistent with the Vue 3 Composition API pattern.


Line range hint 1-116: Overall assessment: Changes look good and likely address the reported issue.

The modifications made to this file appear to effectively address the PR objective of fixing the "add block panel can't open" issue. The shift from using a ref to a class name for the right panel provides more flexibility and could resolve any rendering or accessibility problems that were preventing the panel from opening.

Key points:

  1. The introduction of rightPanelClassName constant improves maintainability.
  2. The consistent use of this class name throughout the component ensures proper styling and manipulation of the right panel.
  3. The changes are well-implemented and follow Vue 3 best practices.

While the changes look good, it would be beneficial to:

  1. Verify that these changes indeed resolve the issue with opening the block panel.
  2. Consider the minor suggestions for improved clarity and consistency in the template.
  3. Ensure that any related components or styles that might have depended on the previous implementation (using rightPanelRef) have been updated accordingly.

To ensure the changes resolve the issue and don't introduce any regressions, please run the following verification steps:

These checks will help ensure that the changes have been applied consistently and don't conflict with existing styles or usage patterns.

packages/plugins/materials/src/meta/block/src/BlockPanel.vue (3)

9-9: Verify the teleport changes and provide documentation.

The teleport component has undergone two significant changes:

  1. The :to attribute now uses rightPanelClassName instead of rightPanelRef.
  2. A defer attribute has been added.

These changes may affect the rendering behavior and targeting of the teleported content. Please ensure that:

  1. The rightPanelClassName correctly targets the intended destination element.
  2. The defer attribute's impact on rendering timing is understood and intentional.

Could you provide more context on why these changes were made and how they address the issue of the block panel not opening? Additionally, consider updating the component's documentation to reflect these changes and their implications.


38-45: Props changes look good, consider adding validation.

The changes to the props improve the component's flexibility and correspond to the template changes:

  1. activeTabName now has a default value, which is a good practice.
  2. The new rightPanelClassName prop aligns with the teleport changes in the template.

To further enhance the robustness of the component, consider adding prop validation:

props: {
  activeTabName: {
    type: String,
    default: '',
    validator: (value) => ['', 'tab1', 'tab2', ...].includes(value) // Add valid tab names
  },
  rightPanelClassName: {
    type: String,
    default: '',
    validator: (value) => /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(value) || value === '' // Ensure valid CSS class name
  }
}

This addition would help catch potential issues early in development.


Line range hint 1-208: Please clarify how these changes fix the block panel opening issue.

The changes made to the component, particularly the teleport modifications and the addition of the rightPanelClassName prop, suggest an attempt to address targeting issues. However, it's not immediately clear how these changes solve the reported problem of the block panel being unable to open.

Could you provide more context on:

  1. What was preventing the block panel from opening before these changes?
  2. How do the teleport modifications and the new rightPanelClassName prop resolve this issue?
  3. Have you tested these changes to confirm that the block panel now opens correctly?

This information will help in understanding the full impact of the changes and ensure that the fix is comprehensive.

packages/plugins/block/src/Main.vue (1)

Line range hint 1-605: Overall assessment: Approved with suggestions for improvement

The change from @click to @editBlock on the <plugin-block-list> component effectively addresses the reported issue of the block panel not opening. This modification improves event handling specificity and aligns well with the component's intended behavior.

While the overall structure of the component is well-organized, there are opportunities for further enhancement:

  1. Consider adding error handling in the editBlock method to gracefully manage potential issues during block refresh or initialization.
  2. To improve maintainability and reusability, consider extracting the block list rendering logic into a separate component.

These suggestions aim to enhance the robustness and maintainability of the code without introducing significant changes to the current implementation.

packages/common/component/PluginBlockList.vue (6)

3-3: Improved rendering condition for block list

The condition for rendering the block list has been updated to include showAddButton. This change allows the list to be displayed even when there are no data items, as long as the add button is shown.


13-13: Updated event handler for block click

The mousedown event handler has been changed to call blockClick instead of directly emitting a click event. This change allows for more flexibility in handling block clicks.


75-77: Added edit functionality for blocks

A new list item has been added to allow editing of blocks. This enhances the functionality of the component by providing users with the ability to edit existing blocks.


136-138: Updated rendering conditions for add button and search-empty component

The conditions for rendering the add button and the search-empty component have been updated to consider the showAddButton prop. This change improves the component's flexibility and user experience.

Also applies to: 153-153


232-232: Added editBlock event to emits array

The editBlock event has been added to the emits array, allowing the component to communicate edit actions to its parent component.


Line range hint 1-753: Overall assessment: Improved functionality and flexibility

The changes made to the PluginBlockList component enhance its functionality and flexibility. Key improvements include:

  1. Added edit functionality for blocks
  2. Updated rendering conditions for better handling of edge cases
  3. Simplified block click handling

These changes improve the component's usability and maintainability without introducing any apparent issues. The code structure remains consistent with the existing codebase, and the new features are well-integrated.

Copy link
Collaborator

@hexqi hexqi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
区块面板白屏了

@hexqi hexqi merged commit 9707834 into opentiny:refactor/develop Sep 28, 2024
2 checks passed
yy-wow pushed a commit to yy-wow/tiny-engine that referenced this pull request Oct 10, 2024
* fix: add block panel can't open

* fix: blockgroup select

* fix: support vue3.5 below version
This was referenced Dec 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working refactor-main refactor/develop branch feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants