From 344baa7cd17fb9db926fb73e7bef668a3cf63fd6 Mon Sep 17 00:00:00 2001
From: chansee97 <chen.dev@foxmail.com>
Date: Tue, 14 May 2024 19:14:07 +0800
Subject: [PATCH] fix: `fullscreen` and browser conficts

---
 src/layouts/components/header/FullScreen.vue | 12 ++++++++++--
 src/views/demo/editor/rich/index.vue         | 12 +++++++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/layouts/components/header/FullScreen.vue b/src/layouts/components/header/FullScreen.vue
index f3fb2eb..dcc5626 100644
--- a/src/layouts/components/header/FullScreen.vue
+++ b/src/layouts/components/header/FullScreen.vue
@@ -2,6 +2,16 @@
 import { useAppStore } from '@/store'
 
 const appStore = useAppStore()
+
+useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.key === 'F11' && e.type === 'keydown') {
+      e.preventDefault()
+      appStore.toggleFullScreen()
+    }
+  },
+})
 </script>
 
 <template>
@@ -15,5 +25,3 @@ const appStore = useAppStore()
     <span>{{ $t('app.toggleFullScreen') }}</span>
   </n-tooltip>
 </template>
-
-<style scoped></style>
diff --git a/src/views/demo/editor/rich/index.vue b/src/views/demo/editor/rich/index.vue
index 20b13f6..5adca8c 100644
--- a/src/views/demo/editor/rich/index.vue
+++ b/src/views/demo/editor/rich/index.vue
@@ -6,15 +6,25 @@ onMounted(() => {
     text.value = '<p>模拟 Ajax 异步设置内容</p>'
   }, 1500)
 })
+
+const active = ref(false)
 </script>
 
 <template>
   <n-card title="富文本编辑器">
     <n-space vertical :size="12">
       <n-alert title="基于 Quill 封装" type="success" />
+      <n-switch v-model:value="active">
+        <template #checked>
+          禁用
+        </template>
+        <template #unchecked>
+          启用
+        </template>
+      </n-switch>
       <n-space :size="12">
         <div class="h-2xl">
-          <RichTextEditor v-model="text" />
+          <RichTextEditor v-model="text" :disabled="active" />
         </div>
         <div>
           <n-h2>v-html 预览</n-h2>