From 9cc5ddfe5b49269b225bd888ad3dc0cbc8e25fdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?jackhoo=28=E8=83=A1=E5=BD=AA=29?= <1679575151@qq.com>
Date: Mon, 4 Dec 2023 08:53:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(demo):=20add=20Ellipsis=20page(=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E7=9C=81=E7=95=A5-demo=20#179)=20(#290)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: jackhoo_98 <jackhoo_98@foxmail.com>
---
 apps/admin/src/pages/demo/feat/ellipsis.vue   | 45 +++++++++++++++++++
 packages/locale/src/lang/en/routes.ts         |  1 +
 packages/locale/src/lang/zh-CN/routes.ts      |  1 +
 .../router/src/routes/modules/demo/feat.ts    |  8 ++++
 4 files changed, 55 insertions(+)
 create mode 100644 apps/admin/src/pages/demo/feat/ellipsis.vue

diff --git a/apps/admin/src/pages/demo/feat/ellipsis.vue b/apps/admin/src/pages/demo/feat/ellipsis.vue
new file mode 100644
index 00000000..f6d7fd7c
--- /dev/null
+++ b/apps/admin/src/pages/demo/feat/ellipsis.vue
@@ -0,0 +1,45 @@
+<template>
+  <VbenCard title="文本省略示例">
+    <VbenCard title="Ellipsis 基本使用">
+      <VbenEllipsis>
+        <template #tooltip>
+          <div style="width: 500px">
+            {{ text }}
+          </div>
+        </template>
+        {{ text }}
+      </VbenEllipsis>
+    </VbenCard>
+    <VbenCard title="Ellipsis 多行省略">
+      <VbenEllipsis :line-clamp="2"> {{ text }}</VbenEllipsis>
+    </VbenCard>
+    <VbenCard title="Ellipsis 点击展开">
+      <VbenEllipsis expand-trigger="click" line-clamp="2" :tooltip="false">{{
+        text
+      }}</VbenEllipsis>
+    </VbenCard>
+    <VbenCard title="Ellipsis 定制 Tooltip 内容">
+      <VbenEllipsis style="max-width: 240px">
+        住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
+        <template #tooltip>
+          <div style="text-align: center">
+            《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦
+            深海的光 停滞的海浪
+          </div>
+        </template>
+      </VbenEllipsis>
+    </VbenCard>
+  </VbenCard>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const text = ref(
+  `
+    Vben3 是一个免费开源的中后台模版。使用了最新的vue3,vite4,TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
+    Vben3 是一个免费开源的中后台模版。使用了最新的vue3,vite4,TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
+    Vben3 是一个免费开源的中后台模版。使用了最新的vue3,vite4,TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
+    Vben3 是一个免费开源的中后台模版。使用了最新的vue3,vite4,TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
+   `,
+)
+</script>
diff --git a/packages/locale/src/lang/en/routes.ts b/packages/locale/src/lang/en/routes.ts
index 3ec3a534..2e5ae689 100644
--- a/packages/locale/src/lang/en/routes.ts
+++ b/packages/locale/src/lang/en/routes.ts
@@ -58,6 +58,7 @@ export default {
       ripple: 'Ripple',
       clickOutSide: 'ClickOutSide',
       print: 'Print',
+      ellipsis: 'EllipsisText',
     },
     page: {
       page: 'Page',
diff --git a/packages/locale/src/lang/zh-CN/routes.ts b/packages/locale/src/lang/zh-CN/routes.ts
index a1e2d3c5..04fc025d 100644
--- a/packages/locale/src/lang/zh-CN/routes.ts
+++ b/packages/locale/src/lang/zh-CN/routes.ts
@@ -59,6 +59,7 @@ export default {
       ripple: '水波纹',
       clickOutSide: 'ClickOutSide组件',
       print: '打印',
+      ellipsis: '文本省略',
     },
     page: {
       page: '页面',
diff --git a/packages/router/src/routes/modules/demo/feat.ts b/packages/router/src/routes/modules/demo/feat.ts
index 711aee21..ff2a81ba 100644
--- a/packages/router/src/routes/modules/demo/feat.ts
+++ b/packages/router/src/routes/modules/demo/feat.ts
@@ -36,6 +36,14 @@ const feat: RouteRecordItem = {
         title: 'routes.demo.feat.print',
       },
     },
+    {
+      path: 'ellipsis',
+      name: 'Ellipsis',
+      component: () => import('@/pages/demo/feat/ellipsis.vue'),
+      meta: {
+        title: 'routes.demo.feat.ellipsis',
+      },
+    },
   ],
 }