docs: fix docs-link and add EllipsisText docs (#5158)

* docs: fix docs-link and add `EllipsisText` docs

* fix: ellipsisText docs link

playground/src/views/examples/doc-button.vue

@@ -7,7 +7,13 @@ import { Button } from 'ant-design-vue';
 const props = defineProps<{ path: string }>();
 
 function handleClick() {
-  openWindow(VBEN_DOC_URL + props.path);
+  // 如果没有.html，打开页面时可能会出现404
+  const path =
+    VBEN_DOC_URL +
+    (props.path.toLowerCase().endsWith('.html')
+      ? props.path
+      : `${props.path}.html`);
+  openWindow(path);
 }
 </script>
 

playground/src/views/examples/ellipsis/index.vue

@@ -5,6 +5,8 @@ import { EllipsisText, Page } from '@vben/common-ui';
 
 import { Card } from 'ant-design-vue';
 
+import DocButton from '../doc-button.vue';
+
 const longText = `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 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。`;
 
 const text = ref(longText);
@@ -15,6 +17,9 @@ const text = ref(longText);
     description="用于多行文本省略，支持点击展开和自定义内容。"
     title="文本省略组件示例"
   >
+    <template #extra>
+      <DocButton class="mb-2" path="/components/common-ui/vben-ellipsis-text" />
+    </template>
     <Card class="mb-4" title="基本使用">
       <EllipsisText :max-width="500">{{ text }}</EllipsisText>
     </Card>

playground/src/views/examples/form/basic.vue

@@ -395,7 +395,7 @@ function handleSetFormValue() {
       </Tabs>
     </template>
     <template #extra>
-      <DocButton path="/components/common-ui/vben-form" />
+      <DocButton class="mb-2" path="/components/common-ui/vben-form" />
     </template>
     <Card v-show="activeTab === 'basic'" title="基础示例">
       <template #extra>