From cfe14b966c6fed186cbc88d10b654d9e3e812747 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Thu, 24 Feb 2022 14:38:23 +0800
Subject: [PATCH] feat: add copy for view code

---
 components/OneDemo.vue | 42 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/components/OneDemo.vue b/components/OneDemo.vue
index 2efef8a..12eb42a 100644
--- a/components/OneDemo.vue
+++ b/components/OneDemo.vue
@@ -66,6 +66,15 @@
     class="source"
     :style="{ height: codeExpanded ? `${sourceHeight || 0}px` : '0' }"
   >
+    <div class="source-toolbar">
+      <veui-button
+        v-tooltip="t('@onelive.copyCode')"
+        ui="icon reverse"
+        @click="copy"
+      >
+        <veui-icon name="copy"/>
+      </veui-button>
+    </div>
     <slot name="source"/>
   </section>
   <transition name="editor">
@@ -85,15 +94,20 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import { Button, Icon } from 'veui'
 import tooltip from 'veui/directives/tooltip'
 import modal from 'veui/managers/modal'
 import i18n from 'veui/mixins/i18n'
+import toast from 'veui/plugins/toast'
 import { BrowserWindow } from 'vue-windows'
 import { getLocale } from '../common/i18n'
 import { play } from '../common/play'
 import OneEditLink from './OneEditLink'
 import OneRepl from './OneRepl'
+import 'veui-theme-dls-icons/copy'
+
+Vue.use(toast)
 
 export default {
   name: 'one-demo',
@@ -143,13 +157,21 @@ export default {
     this.sourceHeight = source.offsetHeight
     style.height = '0'
 
-    this.code = this.$refs.source?.textContent
+    this.code = this.$refs.source?.querySelector('pre')?.textContent || ''
   },
   methods: {
     play (vendor) {
       let locale = getLocale(this.$route.path)
       play(this.$refs.source.textContent, { locale, vendor })
     },
+    async copy () {
+      try {
+        await navigator.clipboard.writeText(this.code)
+        this.$toast.success(this.t('@onelive.copySuccess'))
+      } catch (e) {
+        this.$toast.error(this.t('@onelive.copyFailed'))
+      }
+    },
     handleEditorClose () {
       this.editing = false
     },
@@ -205,6 +227,7 @@ Icon.register({
   background-color #fcfcfc
 
 .source
+  position relative
   overflow hidden
   transition height 0.3s
 
@@ -292,6 +315,23 @@ Icon.register({
     border-color #0052cc !important
     box-shadow 0 0 0 2px rgba(0, 102, 255, 0.2) !important
 
+.source-toolbar
+  position absolute
+  top 12px
+  right 28px
+  display flex
+  align-items center
+
+.veui-button[ui~="icon"][ui~="reverse"]
+  color #ebedf5
+
+  &:hover
+  &[data-focus-visible-added]
+    color #f6f7fa
+
+  &:active
+    color #fff
+
 @media (max-width 480px)
   .toggle-editor
     display none