From f1cd9955d9ef0dd06e6eb0ab88ab6be80db789a3 Mon Sep 17 00:00:00 2001
From: Yanbowen <349952469@qq.com>
Date: Wed, 17 Nov 2021 17:49:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(component):=20=E5=A2=9E=E5=8A=A0=E5=89=AA?=
 =?UTF-8?q?=E8=B4=B4=E6=9D=BF=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/enum/route.ts                  |  2 ++
 src/router/modules/component.ts    | 11 ++++++++++
 src/views/component/copy/index.vue | 34 ++++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+)
 create mode 100644 src/views/component/copy/index.vue

diff --git a/src/enum/route.ts b/src/enum/route.ts
index 83f28f20..2bf7f929 100644
--- a/src/enum/route.ts
+++ b/src/enum/route.ts
@@ -20,6 +20,7 @@ export enum EnumRoutePath {
   'component_editor_quill' = '/component/editor/quill',
   'component_editor_markdown' = '/component/editor/markdown',
   'component_swiper' = '/component/swiper',
+  'component_copy' = '/component/copy',
   'multi-menu' = '/multi-menu',
   'multi-menu_first' = '/multi-menu/first',
   'multi-menu_first_second' = '/multi-menu/first/second',
@@ -52,6 +53,7 @@ export enum EnumRouteTitle {
   'component_editor_quill' = '富文本编辑器',
   'component_editor_markdown' = 'markdown编辑器',
   'component_swiper' = 'Swiper插件',
+  'component_copy' = '剪贴板',
   'multi-menu' = '多级菜单',
   'multi-menu_first' = '一级菜单',
   'multi-menu_first_second' = '二级菜单',
diff --git a/src/router/modules/component.ts b/src/router/modules/component.ts
index d90309dd..07b1c9cb 100644
--- a/src/router/modules/component.ts
+++ b/src/router/modules/component.ts
@@ -7,12 +7,14 @@ import ComponentVideo from '@/views/component/video/index.vue';
 import EditorQuill from '@/views/component/editor/quill/index.vue';
 import EditorMarkdown from '@/views/component/editor/markdown/index.vue';
 import ComponentSwiper from '@/views/component/swiper/index.vue';
+import ComponentCopy from '@/views/component/copy/index.vue';
 
 setRouterCacheName(ComponentMap, ROUTE_NAME_MAP.get('component_map'));
 setRouterCacheName(ComponentVideo, ROUTE_NAME_MAP.get('component_video'));
 setRouterCacheName(EditorQuill, ROUTE_NAME_MAP.get('component_editor_quill'));
 setRouterCacheName(EditorMarkdown, ROUTE_NAME_MAP.get('component_editor_markdown'));
 setRouterCacheName(ComponentSwiper, ROUTE_NAME_MAP.get('component_swiper'));
+setRouterCacheName(ComponentSwiper, ROUTE_NAME_MAP.get('component_copy'));
 
 const COMPONENT: CustomRoute = {
   name: ROUTE_NAME_MAP.get('component'),
@@ -86,6 +88,15 @@ const COMPONENT: CustomRoute = {
         requiresAuth: true,
         title: EnumRouteTitle.component_swiper
       }
+    },
+    {
+      name: ROUTE_NAME_MAP.get('component_copy'),
+      path: EnumRoutePath.component_copy,
+      component: ComponentCopy,
+      meta: {
+        requiresAuth: true,
+        title: EnumRouteTitle.component_copy
+      }
     }
   ]
 };
diff --git a/src/views/component/copy/index.vue b/src/views/component/copy/index.vue
new file mode 100644
index 00000000..38f90afb
--- /dev/null
+++ b/src/views/component/copy/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <n-card title="文本复制" class="h-full shadow-sm rounded-16px">
+      <n-input-group>
+        <n-input v-model:value="source" placeholder="请输入要复制的内容吧" />
+        <n-button type="primary" @click="handleCopy">复制</n-button>
+      </n-input-group>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { NCard, NInputGroup, NInput, NButton, useMessage } from 'naive-ui';
+import { useClipboard } from '@vueuse/core';
+
+const source = ref('');
+const message = useMessage();
+const { copy, isSupported } = useClipboard();
+
+function handleCopy() {
+  if (!isSupported) {
+    message.error('您的浏览器不支持Clipboard API');
+    return;
+  }
+  if (!source.value) {
+    message.error('请输入要复制的内容');
+    return;
+  }
+  copy(source.value);
+  message.success(`复制成功：${source.value}`);
+}
+</script>
+<style scoped></style>