From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/layout/components/Setting/src/components/InterfaceDisplay.vue | 236 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 236 insertions(+), 0 deletions(-)
diff --git a/src/layout/components/Setting/src/components/InterfaceDisplay.vue b/src/layout/components/Setting/src/components/InterfaceDisplay.vue
new file mode 100644
index 0000000..3ba5c6b
--- /dev/null
+++ b/src/layout/components/Setting/src/components/InterfaceDisplay.vue
@@ -0,0 +1,236 @@
+<script lang="ts" setup>
+import { setCssVar } from '@/utils'
+
+import { useDesign } from '@/hooks/web/useDesign'
+import { useWatermark } from '@/hooks/web/useWatermark'
+import { useAppStore } from '@/store/modules/app'
+
+defineOptions({ name: 'InterfaceDisplay' })
+
+const { t } = useI18n()
+const { getPrefixCls } = useDesign()
+const { setWatermark } = useWatermark()
+const prefixCls = getPrefixCls('interface-display')
+const appStore = useAppStore()
+
+const water = ref()
+
+// 闈㈠寘灞�
+const breadcrumb = ref(appStore.getBreadcrumb)
+
+const breadcrumbChange = (show: boolean) => {
+ appStore.setBreadcrumb(show)
+}
+
+// 闈㈠寘灞戝浘鏍�
+const breadcrumbIcon = ref(appStore.getBreadcrumbIcon)
+
+const breadcrumbIconChange = (show: boolean) => {
+ appStore.setBreadcrumbIcon(show)
+}
+
+// 鎶樺彔鍥炬爣
+const hamburger = ref(appStore.getHamburger)
+
+const hamburgerChange = (show: boolean) => {
+ appStore.setHamburger(show)
+}
+
+// 鍏ㄥ睆鍥炬爣
+const screenfull = ref(appStore.getScreenfull)
+
+const screenfullChange = (show: boolean) => {
+ appStore.setScreenfull(show)
+}
+
+// 灏哄鍥炬爣
+const size = ref(appStore.getSize)
+
+const sizeChange = (show: boolean) => {
+ appStore.setSize(show)
+}
+
+// 澶氳瑷�鍥炬爣
+const locale = ref(appStore.getLocale)
+
+const localeChange = (show: boolean) => {
+ appStore.setLocale(show)
+}
+
+// 娑堟伅鍥炬爣
+const message = ref(appStore.getMessage)
+
+const messageChange = (show: boolean) => {
+ appStore.setMessage(show)
+}
+
+// 鏍囩椤�
+const tagsView = ref(appStore.getTagsView)
+
+const tagsViewChange = (show: boolean) => {
+ // 鍒囨崲鏍囩鏍忔樉绀烘椂锛屽悓姝ュ垏鎹㈡爣绛炬爮鐨勯珮搴�
+ setCssVar('--tags-view-height', show ? '35px' : '0px')
+ appStore.setTagsView(show)
+}
+
+// 鏍囩椤垫矇娴�
+const tagsViewImmerse = ref(appStore.getTagsViewImmerse)
+
+const tagsViewImmerseChange = (immerse: boolean) => {
+ appStore.setTagsViewImmerse(immerse)
+}
+
+// 鏍囩椤靛浘鏍�
+const tagsViewIcon = ref(appStore.getTagsViewIcon)
+
+const tagsViewIconChange = (show: boolean) => {
+ appStore.setTagsViewIcon(show)
+}
+
+// logo
+const logo = ref(appStore.getLogo)
+
+const logoChange = (show: boolean) => {
+ appStore.setLogo(show)
+}
+
+// 鑿滃崟鎵嬮鐞�
+const uniqueOpened = ref(appStore.getUniqueOpened)
+
+const uniqueOpenedChange = (uniqueOpened: boolean) => {
+ appStore.setUniqueOpened(uniqueOpened)
+}
+
+// 鍥哄畾澶撮儴
+const fixedHeader = ref(appStore.getFixedHeader)
+
+const fixedHeaderChange = (show: boolean) => {
+ appStore.setFixedHeader(show)
+}
+
+// 椤佃剼
+const footer = ref(appStore.getFooter)
+
+const footerChange = (show: boolean) => {
+ appStore.setFooter(show)
+}
+
+// 鐏拌壊妯″紡
+const greyMode = ref(appStore.getGreyMode)
+
+const greyModeChange = (show: boolean) => {
+ appStore.setGreyMode(show)
+}
+
+// 鍥哄畾鑿滃崟
+const fixedMenu = ref(appStore.getFixedMenu)
+
+const fixedMenuChange = (show: boolean) => {
+ appStore.setFixedMenu(show)
+}
+
+// 璁剧疆姘村嵃
+const setWater = () => {
+ setWatermark(water.value)
+}
+
+const layout = computed(() => appStore.getLayout)
+
+watch(
+ () => layout.value,
+ (n) => {
+ if (n === 'top') {
+ appStore.setCollapse(false)
+ }
+ }
+)
+</script>
+
+<template>
+ <div :class="prefixCls">
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('setting.breadcrumb') }}</span>
+ <ElSwitch v-model="breadcrumb" @change="breadcrumbChange" />
+ </div>
+
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('setting.breadcrumbIcon') }}</span>
+ <ElSwitch v-model="breadcrumbIcon" @change="breadcrumbIconChange" />
+ </div>
+
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('setting.hamburgerIcon') }}</span>
+ <ElSwitch v-model="hamburger" @change="hamburgerChange" />
+ </div>
+
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('setting.screenfullIcon') }}</span>
+ <ElSwitch v-model="screenfull" @change="screenfullChange" />
+ </div>
+
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('setting.sizeIcon') }}</span>
+ <ElSwitch v-model="size" @change="sizeChange" />
+ </div>
+
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('setting.localeIcon') }}</span>
+ <ElSwitch v-model="locale" @change="localeChange" />
+ </div>
+
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('setting.messageIcon') }}</span>
+ <ElSwitch v-model="message" @change="messageChange" />
+ </div>
+
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('setting.tagsView') }}</span>
+ <ElSwitch v-model="tagsView" @change="tagsViewChange" />
+ </div>
+
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('setting.tagsViewImmerse') }}</span>
+ <ElSwitch v-model="tagsViewImmerse" @change="tagsViewImmerseChange" />
+ </div>
+
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('setting.tagsViewIcon') }}</span>
+ <ElSwitch v-model="tagsViewIcon" @change="tagsViewIconChange" />
+ </div>
+
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('setting.logo') }}</span>
+ <ElSwitch v-model="logo" @change="logoChange" />
+ </div>
+
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('setting.uniqueOpened') }}</span>
+ <ElSwitch v-model="uniqueOpened" @change="uniqueOpenedChange" />
+ </div>
+
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('setting.fixedHeader') }}</span>
+ <ElSwitch v-model="fixedHeader" @change="fixedHeaderChange" />
+ </div>
+
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('setting.footer') }}</span>
+ <ElSwitch v-model="footer" @change="footerChange" />
+ </div>
+
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('setting.greyMode') }}</span>
+ <ElSwitch v-model="greyMode" @change="greyModeChange" />
+ </div>
+
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('setting.fixedMenu') }}</span>
+ <ElSwitch v-model="fixedMenu" @change="fixedMenuChange" />
+ </div>
+
+ <div class="flex items-center justify-between">
+ <span class="text-14px">{{ t('watermark.watermark') }}</span>
+ <ElInput v-model="water" class="right-1 w-20" @change="setWater()" />
+ </div>
+ </div>
+</template>
--
Gitblit v1.8.0