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

Feat(page): Add exporting components and APIs for page component to support page template extension (alpha version) #797

Merged
merged 8 commits into from
Oct 22, 2024

Conversation

betterdancing
Copy link
Contributor

@betterdancing betterdancing commented Sep 13, 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

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

    • Introduced PageGeneral for improved page structure.
    • Added dynamic component rendering in PageSetting for enhanced flexibility.
    • Implemented confirmation dialogs for unsaved changes during page copying.
  • Improvements

    • Enhanced page creation process with asynchronous behavior for better user experience.
    • Introduced a new reactive reference for managing selected template cards.
    • Improved validation checks before saving page settings.

Copy link
Contributor

coderabbitai bot commented Sep 13, 2024

Walkthrough

The pull request introduces several modifications across multiple files, primarily focusing on enhancing the exports of various modules. Key changes include the addition of PageGeneral and pageSettingApi to the index.js file in the page plugin, along with the restructuring of component rendering in PageSetting.vue. A new reactive reference, selectedTemplateCard, is added in usePage.js, expanding the module's capabilities. Overall, these updates enhance functionality while maintaining existing logic.

Changes

Files Change Summary
packages/plugins/page/index.js Added PageGeneral and pageSettingApi to the exported object; updated apis property to include both APIs.
packages/plugins/page/src/PageSetting.vue Replaced <page-general> with <component :is="pageGeneral">; introduced beforeCreatePage method in api object; modified createPage to be asynchronous.
packages/plugins/page/src/composable/usePage.js Added new reactive reference selectedTemplateCard and updated export statement to include it.

Possibly related PRs

  • feat: reexport plugin from tiny-engine #556: The changes in this PR involve reexporting various plugins and settings in the design-core package, which includes modifications to the packages/design-core/index.js file, similar to the changes made in the main PR regarding exports.
  • feat(registry): update registry #578: This PR includes changes to the DesignPlugins.vue file that involve renaming properties and enhancing the structure of the component, which may relate to the overall organization of exports and components in the main PR.
  • feat: supports plugin drag and plugin order state is persisted using … #794: This PR introduces drag-and-drop functionality for plugins and enhances layout management, which could be relevant to the changes in the main PR that involve exporting new components and settings.
  • feat: Right Sidebar Menu and Layout Settings #804: The modifications in this PR enhance the visibility and management of menus within the layout, which aligns with the changes in the main PR regarding the organization of exports and components.
  • feat(style): modify advance panel ui #826: This PR focuses on modifying the UI of the advanced panel, which may relate to the overall design and export structure changes in the main PR.
  • fix: add block panel can't open #827: This PR addresses bugs related to the block panel functionality, which could be connected to the changes in the main PR that involve the organization and export of components related to the block panel.

Suggested labels

enhancement, ospp-2024

Suggested reviewers

  • hexqi
  • lizhijie429

🐰 "In the garden of code, we hop with delight,
New components sprout, making everything bright.
With exports enhanced, and structure refined,
Our plugin's a treasure, oh so well-designed!
So let’s dance through the changes, with joy in our hearts,
For in this code burrow, creativity starts!" 🎉


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between d848460 and 31e6ea0.

📒 Files selected for processing (1)
  • packages/plugins/page/index.js (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/plugins/page/index.js

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.

@hexqi hexqi changed the base branch from develop to refactor/develop September 13, 2024 06:08
@github-actions github-actions bot added the refactor-main refactor/develop branch feature label Sep 13, 2024
hexqi
hexqi previously approved these changes Oct 17, 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: 2

🧹 Outside diff range and nitpick comments (3)
packages/plugins/page/src/Main.vue (2)

Line range hint 115-134: Consider refactoring openSettingPanel for improved readability

The openSettingPanel method is quite complex and handles multiple responsibilities. Consider breaking it down into smaller, more focused functions to improve readability and maintainability.

Here's a suggested refactor:

const handlePanelChange = (isFolder, isPageChange) => {
  if (isFolder) {
    isPageChange && closePageSettingPanel();
    openFolderSettingPanel();
  } else {
    isPageChange && closeFolderSettingPanel();
    openPageSettingPanel();
  }
};

const openSettingPanel = async (node) => {
  state.isFolder = !node.data.isPage;
  pageSettingState.isNew = false;

  const isPageChange = node.data.id !== pageSettingState.currentPageData.id;
  handlePanelChange(state.isFolder, isPageChange);

  const pageDetail = await fetchPageDetail(node.data?.id);
  initCurrentPageData(pageDetail);
};

This refactoring separates the panel opening/closing logic into a separate function, making the main openSettingPanel function more concise and easier to understand.


Line range hint 115-134: Add error handling for asynchronous operations

The openSettingPanel method contains an asynchronous operation (fetchPageDetail) without any error handling. This could lead to unhandled promise rejections if the fetch operation fails.

Consider adding try-catch blocks to handle potential errors:

const openSettingPanel = async (node) => {
  try {
    state.isFolder = !node.data.isPage;
    pageSettingState.isNew = false;

    const isPageChange = node.data.id !== pageSettingState.currentPageData.id;
    handlePanelChange(state.isFolder, isPageChange);

    const pageDetail = await fetchPageDetail(node.data?.id);
    initCurrentPageData(pageDetail);
  } catch (error) {
    console.error('Error opening setting panel:', error);
    // Handle the error appropriately, e.g., show an error message to the user
  }
};

This change ensures that any errors during the asynchronous operation are caught and handled appropriately, improving the robustness of the application.

packages/plugins/page/src/PageSetting.vue (1)

22-22: Nitpick: Add key Attribute to Dynamic Component

Adding a key attribute to the dynamic component helps Vue optimize rendering and improves performance.

Apply this suggestion:

 <component
   :is="pageGeneral"
+  :key="pageGeneral"
   ref="pageGeneralRef"
   :isFolder="isFolder"
 ></component>
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between fa7ad25 and f2ee7cd.

📒 Files selected for processing (4)
  • packages/common/component/MetaListItem.vue (4 hunks)
  • packages/design-core/index.js (1 hunks)
  • packages/plugins/page/src/Main.vue (1 hunks)
  • packages/plugins/page/src/PageSetting.vue (4 hunks)
✅ Files skipped from review due to trivial changes (1)
  • packages/common/component/MetaListItem.vue
🧰 Additional context used
🔇 Additional comments (8)
packages/design-core/index.js (1)

36-36: LGTM! Verify PluginSetting implementation.

The addition of PluginSetting to the exports aligns with the PR objectives of expanding functionality. This change makes PluginSetting available for use in other parts of the application, which is beneficial for the AstroPro page template enhancements.

To ensure the correctness of this change, please verify that PluginSetting is properly implemented in the '@opentiny/tiny-engine-common' package. Run the following script to check its implementation:

packages/plugins/page/src/Main.vue (3)

Line range hint 1-28: LGTM: Template changes enhance user interaction

The new SVG buttons for creating folders and pages, along with the corresponding event handlers, improve the user interface and align well with the PR objectives. The use of ref for the page-tree component is a good practice for managing complex interactions.


Line range hint 169-176: LGTM: Style changes are minimal and consistent

The style changes for the .tiny-button class are minimal and appear to be consistent with the existing codebase. The use of the :deep() selector is correct for targeting nested components in Vue 3.


Line range hint 1-176: Overall assessment: Good additions with room for improvement

The changes in this file successfully implement new features for page and folder management, aligning well with the PR objectives. The new UI elements and corresponding logic enhance the user experience and functionality of the application.

However, there are opportunities for improvement:

  1. Extracting default values for pages and folders into utility functions.
  2. Refactoring the openSettingPanel method for better readability and maintainability.
  3. Adding error handling for asynchronous operations.

Addressing these points would further improve the code quality and robustness of the application. Despite these suggestions, the overall implementation is solid and contributes positively to the project.

packages/plugins/page/src/PageSetting.vue (4)

22-22: Approved: Dynamic Component Rendering of pageGeneral

The static component <PageGeneral> has been replaced with a dynamic component using <component :is="pageGeneral">. This enhances flexibility by allowing pageGeneral to be assigned at runtime from the registry.


60-68: Approved: Importing getMergeRegistry and Organizing Imports

The addition of getMergeRegistry to the imports from @opentiny/tiny-engine-meta-register is appropriate for accessing registry components. The imports are well-organized, improving readability.


76-76: Verify the Import Path of meta

Please ensure that the import statement for meta is correct. Verify that '../meta' is the correct relative path and that meta exports the necessary properties (type, id) used in getMergeRegistry.


134-135: Approved: Dynamic Retrieval of PageGeneral from Registry

Retrieving PageGeneral dynamically using getMergeRegistry(meta.type, meta.id) enhances modularity and allows for more flexible component management.

packages/plugins/page/src/Main.vue Show resolved Hide resolved
packages/plugins/page/src/PageSetting.vue Show resolved Hide resolved
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 (3)
packages/plugins/page/src/composable/usePage.js (1)

42-42: Approved, but please add documentation for selectedTemplateCard.

The addition of selectedTemplateCard as a reactive reference is a good practice. However, its purpose and usage are not immediately clear from the context.

Could you please add a comment explaining the intended use of selectedTemplateCard and how it interacts with other parts of the page management system?

packages/plugins/page/src/PageSetting.vue (2)

101-104: Provide documentation for the beforeCreatePage hook

The introduction of the beforeCreatePage asynchronous method in the api object allows for pre-processing before page creation. Consider adding documentation or comments to explain its intended use and how developers can override or extend it.


Line range hint 166-185: Handle potential exceptions from beforeCreatePage

The beforeCreatePage function is awaited without a try-catch block. If it throws an error, it could cause the page creation process to fail silently. To enhance error handling and provide user feedback, wrap the call in a try-catch block.

Apply this diff to handle errors:

 const createPage = async () => {
   const { page_content, ...other } = DEFAULT_PAGE;
   const { page_content: page_content_state, ...pageSettingStateOther } = pageSettingState.currentPageData;
   const createParams = {
     ...other,
     ...pageSettingStateOther,
     page_content: {
       ...page_content,
       ...page_content_state,
       fileName: pageSettingState.currentPageData.name
     },
     app: appInfoState.selectedId,
     isPage: true
   };

   if (createParams.id) {
     delete createParams.id;
     delete createParams._id;
   }

+  try {
     await api.beforeCreatePage(createParams);
+  } catch (error) {
+     useNotify({
+       type: 'error',
+       title: 'Error before creating page',
+       message: error.message || 'An error occurred in beforeCreatePage.'
+     });
+     return;
+  }

   requestCreatePage(createParams)
     .then((data) => {
       pageSettingState.updateTreeData();
       // Remaining code...
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between f2ee7cd and 7357e74.

📒 Files selected for processing (3)
  • packages/plugins/page/index.js (1 hunks)
  • packages/plugins/page/src/PageSetting.vue (7 hunks)
  • packages/plugins/page/src/composable/usePage.js (3 hunks)
🧰 Additional context used
🔇 Additional comments (9)
packages/plugins/page/index.js (3)

16-17: LGTM: New imports added for enhanced functionality.

The new imports for PageGeneral and pageSettingApi are consistent with the changes in the exported object and suggest new functionality being added to the page plugin.


Line range hint 1-31: LGTM: Well-integrated enhancements to the page plugin.

The changes to this file are consistent with the PR objectives and enhance the plugin's functionality as intended. The new imports and modifications to the exported object are well-integrated into the existing structure without introducing apparent conflicts.


21-21: LGTM: Enhanced plugin configuration.

The changes to the exported object expand the plugin's capabilities:

  1. The apis property now includes both api and pageSettingApi, increasing the API surface.
  2. The new components property makes PageGeneral available within the plugin.

These updates align with the PR objectives of expanding the AstroPro page template functionality.

As these changes might introduce a breaking change, please ensure that:

  1. The documentation is updated to reflect these new APIs and components.
  2. Any existing code that relies on the previous structure is updated accordingly.

Run the following script to check for potential documentation updates:

Also applies to: 23-25

packages/plugins/page/src/composable/usePage.js (3)

13-13: LGTM: Import of ref is appropriate.

The addition of ref to the import statement is necessary for creating the new selectedTemplateCard reactive reference. This change aligns with Vue 3 composition API best practices.


Line range hint 1-150: Summary: Changes look good, but more context needed.

The changes to this file are minimal and focused, introducing a new reactive reference selectedTemplateCard. The implementation follows Vue 3 best practices. However, to fully understand the impact and purpose of these changes, more context is needed.

Could you please provide more information on:

  1. The overall feature this change is part of?
  2. How selectedTemplateCard will be used in the page management system?
  3. Any related changes in other components that interact with this composable?

This context will help ensure that the changes are fully aligned with the project's objectives and maintain consistency across the codebase.


138-138: LGTM: Export of selectedTemplateCard is consistent.

The addition of selectedTemplateCard to the exported object is appropriate and consistent with its introduction as a new state variable.

To ensure proper integration, please verify the usage of selectedTemplateCard in other components:

packages/plugins/page/src/PageSetting.vue (3)

60-68: Successfully imported necessary modules

The addition of getMergeRegistry from @opentiny/tiny-engine-meta-register is appropriate and used correctly in the code.


76-76: Importing meta module for registry usage

Importing meta enables the retrieval of component metadata, which is crucial for dynamic component registration.


382-382: Expose pageGeneral and pageGeneralRef to the template

Returning pageGeneral and pageGeneralRef from the setup function allows the template to dynamically render and interact with the pageGeneral component.

@betterdancing betterdancing changed the title Feat(page): 新增页面管理导出components,扩展AstroPro页面模板功能 Feat(page): 新增页面管理导出components和Api,以支持扩展页面模板功能(初版) Oct 21, 2024
chilingling
chilingling previously approved these changes Oct 21, 2024
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.

PR的标题尽量用英文

@betterdancing betterdancing changed the title Feat(page): 新增页面管理导出components和Api,以支持扩展页面模板功能(初版) Feat(page): Add exporting components and APIs for page component to support page template extension (alpha version) Oct 22, 2024
@hexqi hexqi merged commit 399b9ad into opentiny:refactor/develop Oct 22, 2024
2 checks passed
@coderabbitai coderabbitai bot mentioned this pull request Dec 3, 2024
16 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
refactor-main refactor/develop branch feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants