docs: fix docs-link and add EllipsisText docs
#5158
Conversation
mynetfan
requested review from
anncwb,
vince292007 and
a team
as code owners
|
|
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
playground/src/views/examples/ellipsis/index.vueOops! Something went wrong! :( ESLint: 9.16.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/node_modules/@vben/eslint-config/dist/index.mjs' imported from /eslint.config.mjs WalkthroughThis pull request introduces documentation for the new Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 (
|
![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 (9)
docs/src/demos/vben-ellipsis-text/tooltip/index.vue (1)
5-13: Consider adding English translations for better documentation accessibilityWhile the Chinese text effectively demonstrates the component, consider adding English translations or examples to make the documentation more accessible to a global audience.
<EllipsisText :max-width="240"> - 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪 + <!-- Chinese text --> + 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪 + <!-- English example --> + The lonely sea monster living in my heart, the king of pain, begins to tire of the deep sea light and stagnant waves <template #tooltip> <div style="text-align: center"> - 《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦 - 深海的光 停滞的海浪 + <!-- Chinese text --> + 《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦 + 深海的光 停滞的海浪 + <!-- English translation --> + "Qinhuangdao"<br />The lonely sea monster<br />living in my heart, the king of pain<br />begins to tire + of the deep sea light and stagnant waves </div>playground/src/views/examples/doc-button.vue (1)
10-16: Consider enhancing URL handling and documentationThe URL handling logic is good, but could be more robust and better documented.
- // 如果没有.html，打开页面时可能会出现404 - const path = - VBEN_DOC_URL + - (props.path.toLowerCase().endsWith('.html') - ? props.path - : `${props.path}.html`); - openWindow(path); + // Prevent 404 errors by ensuring .html extension + // 如果没有.html，打开页面时可能会出现404 + const normalizedPath = props.path.trim().toLowerCase(); + const documentPath = normalizedPath.endsWith('.html') + ? props.path + : `${props.path}.html`; + openWindow(`${VBEN_DOC_URL}${documentPath}`);docs/src/demos/vben-ellipsis-text/line/index.vue (2)
4-6: Consider improving text content organization and documentationThe demo effectively shows the component functionality, but the text content could be better organized and documented.
-const text = ` -Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。 -`; +// Sample text demonstrating EllipsisText behavior with long content +const text = { + zh: `Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案...`, // Keep original text + en: `Vben Admin is a Vue 3.0, Vite, and TypeScript-based backend solution...` // Add English version +};Also consider adding a comment explaining the purpose of the 500px max-width in the template:
- <EllipsisText :max-width="500">{{ text }}</EllipsisText> + <!-- Set max-width to 500px to demonstrate text truncation behavior --> + <EllipsisText :max-width="500">{{ text.zh }}</EllipsisText>
9-10: Consider adding responsive max-width handlingThe fixed max-width might not work well across different screen sizes.
- <EllipsisText :max-width="500">{{ text }}</EllipsisText> + <div class="demo-container"> + <EllipsisText :max-width="maxWidth">{{ text }}</EllipsisText> + </div> +<style scoped> +.demo-container { + width: 100%; + max-width: 500px; +} +</style>docs/src/components/common-ui/vben-ellipsis-text.md (2)
33-45: Props documentation needs enhancementConsider the following improvements to the Props table:
- Add type information for
tooltipOverlayStyle(currently showsCSSProperties)- Clarify the format for
maxWidthwhen using string values (e.g., specify valid CSS units)- Add examples for color values in
tooltipBackgroundColorandtooltipColor
48-50: Events table could be more descriptiveConsider enhancing the
expandChangeevent description to include:
- When exactly this event is triggered
- The meaning of the
isExpandparameter- Example usage
docs/src/demos/vben-ellipsis-text/expand/index.vue (2)
4-6: Consider simplifying the demo textThe current text is very long and contains repeated content. Consider using a shorter, more focused example that still demonstrates the component's functionality effectively.
-const text = ` -Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。[repeated content...] -`; +const text = ` +Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。 +`;
9-9: Consider adding more props for demonstrationThe current example only demonstrates the
lineandexpandprops. Consider showcasing more props liketooltipMaxWidthorplacementto make the demo more comprehensive.docs/src/components/common-ui/vben-api-component.md (1)
Line range hint
126-146: LGTM! Well-structured API documentation.The API documentation is comprehensive and well-organized. A few minor suggestions to enhance readability:
- Consider grouping related props together (e.g., field mapping props, event-related props)
- Add examples for complex prop types like
beforeFetchandafterFetchConsider adding the following sections to enhance the documentation:
## API ### Props + +#### Field Mapping Props | 属性名 | 描述 | 类型 | 默认值 | | --- | --- | --- | --- | -| component | 欲包装的组件 | `Component` | - | -| numberToString | 是否将value从数字转为string | `boolean` | `false` | -| api | 获取数据的函数 | `(arg?: any) => Promise<OptionsItem[] \| Record<string, any>>` | - | -| params | 传递给api的参数 | `Record<string, any>` | - | | resultField | 从api返回的结果中提取options数组的字段名 | `string` | - | | labelField | label字段名 | `string` | `label` | | childrenField | 子级数据字段名，需要层级数据的组件可用 | `string` | `` | | valueField | value字段名 | `string` | `value` | + +#### Component Configuration Props +| 属性名 | 描述 | 类型 | 默认值 | +| --- | --- | --- | --- | +| component | 欲包装的组件 | `Component` | - | | optionsPropName | 组件接收options数据的属性名称 | `string` | `options` | | modelPropName | 组件的双向绑定属性名，默认为modelValue。部分组件可能为value | `string` | `modelValue` | + +#### Data Fetching Props +| 属性名 | 描述 | 类型 | 默认值 | +| --- | --- | --- | --- | +| api | 获取数据的函数 | `(arg?: any) => Promise<OptionsItem[] \| Record<string, any>>` | - | +| params | 传递给api的参数 | `Record<string, any>` | - | | immediate | 是否立即调用api | `boolean` | `true` | | alwaysLoad | 每次`visibleEvent`事件发生时都重新请求数据 | `boolean` | `false` | | beforeFetch | 在api请求之前的回调函数 | `AnyPromiseFunction<any, any>` | - | | afterFetch | 在api请求之后的回调函数 | `AnyPromiseFunction<any, any>` | - | + +### Examples + +#### Using beforeFetch and afterFetch + +```ts +const beforeFetch = async (params: any) => { + // Modify params before API call + return params; +}; + +const afterFetch = async (data: any) => { + // Process data after API call + return data; +}; +```
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
docs/.vitepress/config/zh.mts(1 hunks)docs/src/components/common-ui/vben-api-component.md(1 hunks)docs/src/components/common-ui/vben-ellipsis-text.md(1 hunks)docs/src/demos/vben-ellipsis-text/expand/index.vue(1 hunks)docs/src/demos/vben-ellipsis-text/line/index.vue(1 hunks)docs/src/demos/vben-ellipsis-text/tooltip/index.vue(1 hunks)playground/src/views/examples/doc-button.vue(1 hunks)playground/src/views/examples/ellipsis/index.vue(1 hunks)playground/src/views/examples/form/basic.vue(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- playground/src/views/examples/form/basic.vue
🔇 Additional comments (2)
playground/src/views/examples/ellipsis/index.vue (1)
18-20: LGTM! Good addition of documentation link
The DocButton is well-placed in the extra slot of the Page component, providing easy access to the component documentation.
docs/.vitepress/config/zh.mts (1)
189-192: LGTM! Properly structured sidebar entry.
The new EllipsisText component entry follows the existing sidebar patterns and conventions.
Description
修复演示页面中的文档链接可能会404的问题；
添加EllipsisText组件文档
fix #5155
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
New Features
Vben EllipsisTextcomponent, detailing its usage and properties.Vben ApiComponentdocumentation.EllipsisTextcomponent showcasing expandable text, line truncation, and tooltip functionality.Bug Fixes
DocButtoncomponent to prevent 404 errors.Style
DocButtoncomponent in the form example to include a margin-bottom styling.Chores