chore(demo): demo add copy code button (#25)

* chore(demo): demo add copy button

* chore: copy code button update

* chore: change copy fun

* Update demo/utils/ComponentDemo.vue

Co-authored-by: 07akioni <07akioni2@gmail.com>

demo/utils/ComponentDemo.vue

@@ -35,6 +35,18 @@
         </template>
         {{ t('editOnGithub') }}
       </n-tooltip>
+      <n-tooltip trigger="hover" :placement="'top'" :show-arrow="true">
+        <template #trigger>
+          <copy-code-button
+            depth="3"
+            style="padding: 0; margin-right: 6px"
+            size="tiny"
+            :code="sfcCode"
+            :success-text="t('copySuccess')"
+          />
+        </template>
+        {{ t('copyCode') }}
+      </n-tooltip>
       <n-tooltip
         ref="expandCodeButtonRef"
         trigger="hover"
@@ -76,12 +88,13 @@ import { useDisplayMode } from '../store'
 import { i18n } from '../utils/composables'
 import EditOnGithubButton from './EditOnGithubButton.vue'
 import editInCodeSandboxButton from './EditInCodeSandboxButton.vue'
-
+import CopyCodeButton from './CopyCodeButton.vue'
 export default {
   components: {
     CodeOutline,
     EditOnGithubButton,
-    editInCodeSandboxButton
+    editInCodeSandboxButton,
+    CopyCodeButton
   },
   props: {
     title: {
@@ -130,13 +143,17 @@ export default {
           show: '显示代码',
           hide: '收起代码',
           editOnGithub: '在 Github 中编辑',
-          editInCodeSandbox: '在 CodeSandbox 中编辑'
+          editInCodeSandbox: '在 CodeSandbox 中编辑',
+          copyCode: '复制代码',
+          copySuccess: '复制成功'
         },
         'en-US': {
           show: 'Show Code',
           hide: 'Hide Code',
           editOnGithub: 'Edit on Github',
-          editInCodeSandbox: 'Edit in CodeSandbox'
+          editInCodeSandbox: 'Edit in CodeSandbox',
+          copyCode: 'Copy Code',
+          copySuccess: 'Successfully Copied'
         }
       })
     }

demo/utils/CopyCodeButton.vue

@@ -0,0 +1,70 @@
+<template>
+  <n-button
+    class="edit-button"
+    text
+    :size="size"
+    @click="handleClick"
+    :depth="depth"
+  >
+    <template #icon>
+      <n-icon size="14">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 -32 544 544">
+          <rect
+            x="128"
+            y="128"
+            width="336"
+            height="336"
+            rx="57"
+            ry="57"
+            style="
+              fill: none;
+              stroke: currentcolor;
+              stroke-linejoin: round;
+              stroke-width: 32px;
+            "
+          ></rect>
+          <path
+            d="M383.5,128l.5-24a56.16,56.16,0,0,0-56-56H112a64.19,64.19,0,0,0-64,64V328a56.16,56.16,0,0,0,56,56h24"
+            style="
+              fill: none;
+              stroke: currentcolor;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+              stroke-width: 32px;
+            "
+          ></path>
+        </svg>
+      </n-icon>
+    </template>
+  </n-button>
+</template>
+
+<script>
+import { useMessage } from 'naive-ui'
+export default {
+  name: 'CopyCodeButton',
+  props: {
+    code: {
+      type: String,
+      required: true
+    },
+    successText: {
+      type: String,
+      required: true
+    },
+    text: Boolean,
+    size: String,
+    depth: String
+  },
+  setup (props) {
+    const message = useMessage()
+    return {
+      handleClick () {
+        navigator.clipboard.writeText(props.code).then(() => {
+          message.success(props.successText)
+        })
+      }
+    }
+  }
+}
+</script>