chore(@vben/playground): add a clipboard example (#4133)

* chore(@vben/playground): 增加剪切板示例

* chore: rm unuse code

playground/src/locales/langs/en-US.json

@@ -47,7 +47,8 @@
         "icons": "Icons",
         "watermark": "Watermark",
         "tabs": "Tabs",
-        "tabDetail": "Tab Detail Page"
+        "tabDetail": "Tab Detail Page",
+        "clipboard": "Clipboard"
       },
       "breadcrumb": {
         "navigation": "Breadcrumb Navigation",

playground/src/locales/langs/zh-CN.json

@@ -47,7 +47,8 @@
         "icons": "图标",
         "watermark": "水印",
         "tabs": "标签页",
-        "tabDetail": "标签详情页"
+        "tabDetail": "标签详情页",
+        "clipboard": "剪贴板"
       },
       "breadcrumb": {
         "navigation": "面包屑导航",

playground/src/router/routes/modules/demos.ts

@@ -165,6 +165,15 @@ const routes: RouteRecordRaw[] = [
               },
             ],
           },
+          {
+            name: 'ClipboardDemo',
+            path: '/demos/features/clipboard',
+            component: () =>
+              import('#/views/demos/features/clipboard/index.vue'),
+            meta: {
+              title: $t('page.demos.features.clipboard'),
+            },
+          },
         ],
       },
       // 面包屑导航

playground/src/views/demos/features/clipboard/index.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { useClipboard } from '@vueuse/core';
+import { Button, Input } from 'ant-design-vue';
+
+const source = ref('Hello');
+const { copy, text } = useClipboard({ source });
+</script>
+
+<template>
+  <Page title="剪切板示例">
+    <p class="mb-3">
+      Current copied: <code>{{ text || 'none' }}</code>
+    </p>
+    <Input.Group class="flex">
+      <Input v-model:value="source" placeholder="请输入" />
+      <Button type="primary" @click="copy(source)"> Copy </Button>
+    </Input.Group>
+  </Page>
+</template>