From 1adfc97281880e6065507682f054e1414e9bebc8 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Thu, 4 Apr 2024 13:12:21 +0800
Subject: [PATCH] =?UTF-8?q?Feat:=20=E5=A2=9E=E5=8A=A0=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/apple-devices-preview.vue | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/views/apple-devices-preview.vue b/src/views/apple-devices-preview.vue
index 06125c6..637165d 100644
--- a/src/views/apple-devices-preview.vue
+++ b/src/views/apple-devices-preview.vue
@@ -1,10 +1,11 @@
 <!-- 网站预览图生成 -->
 <template>
-  <div>
+  <div :style="{ backgroundColor: pageBackgroundColor }">
     <div v-if="!isPreview" class="page-header">
       <el-input v-model="desktopLink" placeholder="输入桌面端链接" />
       <el-input v-model="mobileLink" placeholder="输入移动端链接" />
       <el-switch v-model="showBangs" active-text="显示刘海" />
+      <el-color-picker v-model="pageBackgroundColor" :predefine="predefineColors" />
       <el-button-group>
         <el-button type="primary" size="medium" @click="preview">预览</el-button>
         <el-button type="primary" size="medium" :loading="loading" @click="generatePreview">下载</el-button>
@@ -39,6 +40,19 @@ export default {
       loading: false,
       showBangs: false,
       isPreview: false,
+      pageBackgroundColor: '#fff',
+      predefineColors: [
+        '#fff',
+        '#000',
+        '#ffe9e3',
+        '#dcd6f7',
+        '#B1B3E4',
+        '#81d795',
+        '#7ac5cd',
+        '#f6e58d',
+        '#ffbe76',
+        '#ff8e8e',
+      ],
     }
   },
   computed: {
@@ -52,6 +66,14 @@ export default {
       headerContainer.style.display = val ? 'none' : 'flex'
     },
   },
+  mounted() {
+    // 监听键盘事件 Esc 退出预览
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        this.isPreview = false
+      }
+    })
+  },
   methods: {
     getIframeImage() {
       const iframeHtml = document.querySelector('iframe')
@@ -92,7 +114,7 @@ export default {
     preview() {
       this.isPreview = true
       this.$message({
-        message: '预览 15 秒后自动退出，你可以使用截图工具保存图片！',
+        message: '预览 15 秒后自动退出或按 ESC 键退出，你可以使用截图工具保存图片！',
         type: 'info',
         showClose: true,
         duration: 2000,
@@ -142,7 +164,7 @@ export default {
   gap: 0.5rem;
   margin-block: 1rem;
   .el-input {
-    width: 350px;
+    width: 300px;
   }
 }
 .d-none {