fix(docs):Fixed an issue where plus will display header search and description #3002
Conversation
WalkthroughThis pull request updates the conditional rendering logic based on the current URL. In Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant Common
User->>App: Load page
App->>App: Retrieve current URL
App-->>App: Check for "tiny-vue-plus" in URL
alt URL does NOT contain "tiny-vue-plus"
App->>Common: Call renderHeader()
else URL contains "tiny-vue-plus"
App-->Common: Skip header rendering
end
sequenceDiagram
participant User
participant Overview
participant Computed
User->>Overview: Load component
Overview->>Computed: Evaluate isPlus from URL
alt isPlus is false
Overview->>Overview: Render <h1> element
else isPlus is true
Overview-->Overview: Do not render <h1> element
end
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
examples/sites/src/views/overview.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/src/App.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Walkthrough此PR修复了一个问题，即在非plus版本中不应显示头部搜索和描述。通过在代码中添加条件判断，确保只有在plus版本中才会显示这些元素。 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
WalkthroughThis PR fixes an issue where header searches and descriptions should not be displayed in non-plus versions. By adding conditional judgments in the code, make sure that these elements are displayed only in the plus version. Changes
|
|
[e2e-test-warn] The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug". Please make sure you've read our contributing guide |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
examples/sites/src/App.vue (1)
42-45: Conditional header rendering based on URLThe code adds a check to only render the header when the URL doesn't include 'tiny-vue-plus', which aligns with the PR objective to fix the display of header search in the plus component.
Note that the comment "// 非plus隐藏搜索" (which translates to "Hide search when not in plus") is slightly misaligned with the implementation, which actually prevents rendering the header (with search functionality) when in plus mode.
Consider updating the comment to more accurately reflect the implementation:
- // 非plus隐藏搜索 + // plus模式下不显示头部搜索examples/sites/src/views/overview.vue (1)
42-45: Consider extracting URL checking logicBoth files implement similar logic to check if the current URL includes 'tiny-vue-plus'. This duplication could be refactored into a shared utility or composable function for better maintainability.
You could create a composable function like this:
// useAppMode.js import { computed } from 'vue' export function useAppMode() { const isPlus = computed(() => location.href.includes('tiny-vue-plus')) return { isPlus } }Then import and use it in both components:
import { useAppMode } from '@/tools/useAppMode' // In setup function const { isPlus } = useAppMode()Also applies to: 89-90
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
examples/sites/src/App.vue(1 hunks)examples/sites/src/views/overview.vue(3 hunks)
🔇 Additional comments (2)
examples/sites/src/views/overview.vue (2)
9-9: Conditionally hide overview description in plus modeThis change correctly applies conditional rendering to the overview description, ensuring it's hidden when in plus mode. This implementation aligns with the PR objective to fix the display issue.
67-67: Updated Vue import to include computedCorrectly added
computedto the Vue imports, which is required for the new isPlus computed property.
| common.renderHeader() | ||
| // 非plus隐藏搜索 | ||
| if (!location.href.includes('tiny-vue-plus')) { | ||
| common.renderHeader() |
There was a problem hiding this comment.
这里是渲染公共头部的，不是全局搜索，应该是在main.js里面去改docsearch
PR
修复plus会显示头部搜索和描述问题
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
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