fix(site):Fixed the plus official website interface and type document display #3062
Conversation
WalkthroughThe pull request modifies the Changes
Sequence Diagram(s)sequenceDiagram
participant L as loadPage()
participant C as Condition Check
participant D as demosJson Check
participant T as Tab Header
L->>C: Evaluate cmpId against ['interfaces', 'types', 'classes']
alt cmpId matches
C-->>L: Set hideTabHeader = true
else cmpId does not match
C-->>L: Set hideTabHeader = false
end
L->>D: Check if demosJson exists and hideTabHeader is false
alt demosJson present & !hideTabHeader
D-->>L: Process demosJson normally
else
L->>T: Set activeTab = "api"
L->>T: Hide tab header if hideTabHeader true
end
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
examples/sites/src/views/components-doc/common.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. 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:
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官网接口和类型文档的显示问题。主要通过在特定条件下隐藏选项卡头部来实现。 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
WalkthroughThis PR fixes the display problem of plus official website interface and type documents. This is mainly achieved by hiding the tab header under specific conditions. 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 |
discreted66
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
examples/sites/src/views/components-doc/common.vue (1)
297-300: Consider using a Vue-based approach instead of direct DOM manipulation.Direct DOM manipulation using
document.querySelectorcan be problematic in Vue applications as it bypasses Vue's reactive system and can lead to issues during component lifecycle changes.Consider using a more Vue-oriented approach:
-// 隐藏tab的头部 -if (hideTabHeader) { - document.querySelector('.tiny-tabs__header').style.display = 'none' -} +// 隐藏tab的头部 +nextTick(() => { + if (hideTabHeader && document.querySelector('.tiny-tabs__header')) { + document.querySelector('.tiny-tabs__header').style.display = 'none' + } +})An even better approach would be to add a CSS class or reactive property to handle this:
-// 隐藏tab的头部 -if (hideTabHeader) { - document.querySelector('.tiny-tabs__header').style.display = 'none' -} +// Set reactive state property +state.showTabHeader = !hideTabHeaderThen use this in your template:
<tiny-tabs v-model="state.activeTab" ref="demoTabs" class="docs-content-tabs" :class="{ 'hide-tab-header': !state.showTabHeader }" @click="onTabsClick">And add corresponding CSS:
.hide-tab-header :deep(.tiny-tabs__header) { display: none; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
examples/sites/src/views/components-doc/common.vue(2 hunks)
🔇 Additional comments (2)
examples/sites/src/views/components-doc/common.vue (2)
282-283: Good addition of a clear control flag for tab headers.This introduces a clean way to determine when the tab header should be hidden based on component ID types, improving the UI flow for special component types.
285-285: Effective control flow modification.The condition now correctly skips the demo JSON processing when the tab header should be hidden, which prevents unnecessary rendering and ensures consistent UI behavior.
3 participants
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