diff --git a/src/assets/images/chart/decorates/fullScreen.png b/src/assets/images/chart/decorates/fullScreen.png
new file mode 100644
index 00000000..04167ed6
Binary files /dev/null and b/src/assets/images/chart/decorates/fullScreen.png differ
diff --git a/src/packages/components/Decorates/Mores/FullScreen/config.ts b/src/packages/components/Decorates/Mores/FullScreen/config.ts
new file mode 100644
index 00000000..bed59c06
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/FullScreen/config.ts
@@ -0,0 +1,18 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { FullScreenConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+ border: 6,
+ bgColor: '#84a5e9',
+ borderColor: '#84a5e9'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+ public key = FullScreenConfig.key
+ public attr = { ...chartInitConfig, w: 150, h: 150 }
+ public chartConfig = cloneDeep(FullScreenConfig)
+ public option = cloneDeep(option)
+}
diff --git a/src/packages/components/Decorates/Mores/FullScreen/config.vue b/src/packages/components/Decorates/Mores/FullScreen/config.vue
new file mode 100644
index 00000000..450752d7
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/FullScreen/config.vue
@@ -0,0 +1,28 @@
+<template>
+ <CollapseItem name="全屏按钮" expanded>
+ <SettingItemBox name="按钮">
+ <SettingItem name="背景色">
+ <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.bgColor"></n-color-picker>
+ </SettingItem>
+ <SettingItem name="边框色">
+ <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.borderColor"></n-color-picker>
+ </SettingItem>
+ <SettingItem name="边框大小">
+ <n-input-number v-model:value="optionData.border" size="small" :step="0.5" :min="0"></n-input-number>
+ </SettingItem>
+ </SettingItemBox>
+ </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+ optionData: {
+ type: Object as PropType<typeof option>,
+ required: true
+ }
+})
+</script>
diff --git a/src/packages/components/Decorates/Mores/FullScreen/index.ts b/src/packages/components/Decorates/Mores/FullScreen/index.ts
new file mode 100644
index 00000000..19e37683
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/FullScreen/index.ts
@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const FullScreenConfig: ConfigType = {
+ key: 'FullScreen',
+ chartKey: 'VFullScreen',
+ conKey: 'VCFullScreen',
+ title: '全屏按钮',
+ category: ChatCategoryEnum.MORE,
+ categoryName: ChatCategoryEnumName.MORE,
+ package: PackagesCategoryEnum.DECORATES,
+ chartFrame: ChartFrameEnum.STATIC,
+ image: 'fullScreen.png'
+}
diff --git a/src/packages/components/Decorates/Mores/FullScreen/index.vue b/src/packages/components/Decorates/Mores/FullScreen/index.vue
new file mode 100644
index 00000000..805c8294
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/FullScreen/index.vue
@@ -0,0 +1,111 @@
+<template>
+ <svg @click="toggleFullscreen" v-if="!isFullscreen" viewBox="0 0 1024 1024">
+ <path
+ d="M665.6 1017.6c-19.2 0-38.4-19.2-38.4-38.4s19.2-38.4 38.4-38.4h268.8l6.4-268.8c0-19.2 19.2-38.4 38.4-38.4s38.4 19.2 38.4 38.4v294.4c0 32-25.6 51.2-51.2 51.2h-300.8zM51.2 396.8c-19.2 0-38.4-19.2-38.4-38.4V64C12.8 32 38.4 12.8 64 12.8h294.4c19.2 0 38.4 19.2 38.4 38.4s-19.2 38.4-38.4 38.4H89.6v268.8c0 19.2-19.2 38.4-38.4 38.4zM64 1017.6c-32 0-51.2-25.6-51.2-51.2v-294.4c0-19.2 19.2-38.4 38.4-38.4s38.4 19.2 38.4 38.4v217.6l198.4-198.4c6.4-6.4 19.2-12.8 25.6-12.8s19.2 6.4 25.6 12.8c6.4 6.4 12.8 19.2 12.8 25.6 0 12.8-6.4 19.2-12.8 25.6l-198.4 198.4h217.6c19.2 0 38.4 19.2 38.4 38.4s-19.2 38.4-38.4 38.4H64z m915.2-620.8c-19.2 0-38.4-19.2-38.4-38.4V140.8l-198.4 198.4c-6.4 6.4-19.2 12.8-25.6 12.8-12.8 0-19.2-6.4-25.6-12.8-12.8-12.8-12.8-38.4 0-51.2l198.4-198.4h-217.6c-19.2 0-38.4-19.2-38.4-38.4s19.2-38.4 38.4-38.4h294.4c32 0 51.2 25.6 51.2 51.2v294.4c0 19.2-19.2 38.4-38.4 38.4z"
+ class="fullScreen-border"
+ ></path>
+ </svg>
+ <svg @click="toggleFullscreen" v-else viewBox="0 0 1024 1024">
+ <path
+ d="M379.336 697.237L153.362 921.55c-14.11 14.007-36.905 13.922-50.912-0.188-14.007-14.11-13.922-36.905 0.188-50.912l227.6-225.927H138.645c-18.99 0-34.385-15.446-34.385-34.5 0-19.053 15.395-34.5 34.385-34.5H413.72c18.99 0 34.384 15.447 34.384 34.5v276c0 9.15-3.622 17.926-10.07 24.396a34.326 34.326 0 0 1-24.314 10.104 34.326 34.326 0 0 1-24.314-10.104 34.559 34.559 0 0 1-10.071-24.396V697.237z m263.395-366.88l227.813-227.813c14.059-14.059 36.853-14.059 50.912 0 14.059 14.059 14.059 36.853 0 50.912l-225.18 225.18h187.147c18.99 0 34.385 15.445 34.385 34.5 0 19.053-15.395 34.5-34.385 34.5H608.346c-18.99 0-34.384-15.447-34.384-34.5v-276c0-9.15 3.622-17.926 10.07-24.396a34.326 34.326 0 0 1 24.314-10.105c9.12 0 17.865 3.635 24.314 10.105a34.559 34.559 0 0 1 10.07 24.395v193.223zM99.385 410a34.326 34.326 0 0 1-24.314-10.105A34.559 34.559 0 0 1 65 375.5v-276C65 80.446 80.395 65 99.385 65h275.077c18.99 0 34.384 15.446 34.384 34.5 0 19.054-15.394 34.5-34.384 34.5H133.769v241.5c0 9.15-3.622 17.925-10.07 24.395A34.326 34.326 0 0 1 99.384 410z m825.23 552H649.538c-18.99 0-34.384-15.446-34.384-34.5 0-19.054 15.394-34.5 34.384-34.5h240.693V651.5c0-19.054 15.394-34.5 34.384-34.5 18.99 0 34.385 15.446 34.385 34.5v276c0 19.054-15.395 34.5-34.385 34.5z"
+ class="fullScreen-border"
+ ></path>
+ </svg>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, onMounted, onUnmounted } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { option } from './config'
+
+const props = defineProps({
+ chartConfig: {
+ type: Object as PropType<CreateComponentType & typeof option>,
+ required: true
+ }
+})
+
+let { border, bgColor, borderColor } = toRefs(props.chartConfig.option)
+const isFullscreen = ref(false)
+const checkFullscreen = () => {
+ isFullscreen.value = !!(
+ document.fullscreenElement ||
+ document.webkitFullscreenElement ||
+ document.mozFullScreenElement ||
+ document.msFullscreenElement
+ )
+}
+checkFullscreen()
+
+const requestFullscreen = element => {
+ if (element.requestFullscreen) {
+ element.requestFullscreen()
+ } else if (element.mozRequestFullScreen) {
+ /* Firefox */
+ element.mozRequestFullScreen()
+ } else if (element.webkitRequestFullscreen) {
+ /* Chrome, Safari and Opera */
+ element.webkitRequestFullscreen()
+ } else if (element.msRequestFullscreen) {
+ /* IE/Edge */
+ element.msRequestFullscreen()
+ }
+}
+
+const exitFullscreen = () => {
+ if (document.fullscreenElement && document.exitFullscreen) {
+ document.exitFullscreen()
+ } else if (document.mozFullScreenElement && document.mozCancelFullScreen) {
+ /* Firefox */
+ document.mozCancelFullScreen()
+ } else if (document.webkitFullscreenElement && document.webkitExitFullscreen) {
+ /* Chrome, Safari and Opera */
+ document.webkitExitFullscreen()
+ } else if (document.msFullscreenElement && document.msExitFullscreen) {
+ /* IE/Edge */
+ document.msExitFullscreen()
+ }
+}
+
+const toggleFullscreen = () => {
+ if (!isFullscreen.value) {
+ requestFullscreen(document.documentElement)
+ } else {
+ exitFullscreen()
+ }
+ isFullscreen.value = !isFullscreen.value
+ // 由于全屏状态的改变不会立即生效，所以需要延迟一段时间再去获取全屏状态
+ setTimeout(() => {
+ checkFullscreen()
+ }, 1000)
+}
+
+// 监听全屏状态的改变，保证多个全屏组件的状态一致
+onMounted(() => {
+ document.addEventListener('fullscreenchange', checkFullscreen)
+ document.addEventListener('webkitfullscreenchange', checkFullscreen)
+ document.addEventListener('mozfullscreenchange', checkFullscreen)
+ document.addEventListener('MSFullscreenChange', checkFullscreen)
+})
+
+onUnmounted(() => {
+ document.removeEventListener('fullscreenchange', checkFullscreen)
+ document.removeEventListener('webkitfullscreenchange', checkFullscreen)
+ document.removeEventListener('mozfullscreenchange', checkFullscreen)
+ document.removeEventListener('MSFullscreenChange', checkFullscreen)
+})
+</script>
+
+<style lang="scss" scoped>
+svg {
+ display: block;
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+}
+.fullScreen-border {
+ stroke: v-bind('borderColor');
+ stroke-width: v-bind('border+"px"');
+ fill: v-bind('bgColor');
+}
+</style>
diff --git a/src/packages/components/Decorates/Mores/index.ts b/src/packages/components/Decorates/Mores/index.ts
index 7223832b..489b9c5c 100644
--- a/src/packages/components/Decorates/Mores/index.ts
+++ b/src/packages/components/Decorates/Mores/index.ts
@@ -1,9 +1,19 @@
import { NumberConfig } from './Number/index'
import { TimeCommonConfig } from './TimeCommon/index'
import { ClockConfig } from './Clock/index'
+import { FullScreenConfig } from './FullScreen/index'
import { CountDownConfig } from './CountDown/index'
import { FlipperNumberConfig } from './FlipperNumber'
import { PipelineHConfig } from './PipelineH/index'
import { PipelineVConfig } from './PipelineV/index'
-export default [NumberConfig, FlipperNumberConfig, TimeCommonConfig, CountDownConfig, ClockConfig, PipelineHConfig, PipelineVConfig]
+export default [
+ NumberConfig,
+ FlipperNumberConfig,
+ TimeCommonConfig,
+ CountDownConfig,
+ ClockConfig,
+ FullScreenConfig,
+ PipelineHConfig,
+ PipelineVConfig
+]