| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <script lang="ts" setup> |
| H | 2 | import { setCssVar } from '@/utils' |
| 3 | ||
| 4 | import { useDesign } from '@/hooks/web/useDesign' | |
| 5 | import { useWatermark } from '@/hooks/web/useWatermark' | |
| 6 | import { useAppStore } from '@/store/modules/app' | |
| 7 | ||
| 8 | defineOptions({ name: 'InterfaceDisplay' }) | |
| 9 | ||
| 10 | const { t } = useI18n() | |
| 11 | const { getPrefixCls } = useDesign() | |
| 12 | const { setWatermark } = useWatermark() | |
| 13 | const prefixCls = getPrefixCls('interface-display') | |
| 14 | const appStore = useAppStore() | |
| 15 | ||
| 16 | const water = ref() | |
| 17 | ||
| 18 | // 面包屑 | |
| 19 | const breadcrumb = ref(appStore.getBreadcrumb) | |
| 20 | ||
| 21 | const breadcrumbChange = (show: boolean) => { | |
| 22 | appStore.setBreadcrumb(show) | |
| 23 | } | |
| 24 | ||
| 25 | // 面包屑图标 | |
| 26 | const breadcrumbIcon = ref(appStore.getBreadcrumbIcon) | |
| 27 | ||
| 28 | const breadcrumbIconChange = (show: boolean) => { | |
| 29 | appStore.setBreadcrumbIcon(show) | |
| 30 | } | |
| 31 | ||
| 32 | // 折叠图标 | |
| 33 | const hamburger = ref(appStore.getHamburger) | |
| 34 | ||
| 35 | const hamburgerChange = (show: boolean) => { | |
| 36 | appStore.setHamburger(show) | |
| 37 | } | |
| 38 | ||
| 39 | // 全屏图标 | |
| 40 | const screenfull = ref(appStore.getScreenfull) | |
| 41 | ||
| 42 | const screenfullChange = (show: boolean) => { | |
| 43 | appStore.setScreenfull(show) | |
| 44 | } | |
| 45 | ||
| 46 | // 尺寸图标 | |
| 47 | const size = ref(appStore.getSize) | |
| 48 | ||
| 49 | const sizeChange = (show: boolean) => { | |
| 50 | appStore.setSize(show) | |
| 51 | } | |
| 52 | ||
| 53 | // 多语言图标 | |
| 54 | const locale = ref(appStore.getLocale) | |
| 55 | ||
| 56 | const localeChange = (show: boolean) => { | |
| 57 | appStore.setLocale(show) | |
| 58 | } | |
| 59 | ||
| 60 | // 消息图标 | |
| 61 | const message = ref(appStore.getMessage) | |
| 62 | ||
| 63 | const messageChange = (show: boolean) => { | |
| 64 | appStore.setMessage(show) | |
| 65 | } | |
| 66 | ||
| 67 | // 标签页 | |
| 68 | const tagsView = ref(appStore.getTagsView) | |
| 69 | ||
| 70 | const tagsViewChange = (show: boolean) => { | |
| 71 | // 切换标签栏显示时，同步切换标签栏的高度 | |
| 72 | setCssVar('--tags-view-height', show ? '35px' : '0px') | |
| 73 | appStore.setTagsView(show) | |
| 74 | } | |
| 75 | ||
| 76 | // 标签页图标 | |
| 77 | const tagsViewIcon = ref(appStore.getTagsViewIcon) | |
| 78 | ||
| 79 | const tagsViewIconChange = (show: boolean) => { | |
| 80 | appStore.setTagsViewIcon(show) | |
| 81 | } | |
| 82 | ||
| 83 | // logo | |
| 84 | const logo = ref(appStore.getLogo) | |
| 85 | ||
| 86 | const logoChange = (show: boolean) => { | |
| 87 | appStore.setLogo(show) | |
| 88 | } | |
| 89 | ||
| 90 | // 菜单手风琴 | |
| 91 | const uniqueOpened = ref(appStore.getUniqueOpened) | |
| 92 | ||
| 93 | const uniqueOpenedChange = (uniqueOpened: boolean) => { | |
| 94 | appStore.setUniqueOpened(uniqueOpened) | |
| 95 | } | |
| 96 | ||
| 97 | // 固定头部 | |
| 98 | const fixedHeader = ref(appStore.getFixedHeader) | |
| 99 | ||
| 100 | const fixedHeaderChange = (show: boolean) => { | |
| 101 | appStore.setFixedHeader(show) | |
| 102 | } | |
| 103 | ||
| 104 | // 页脚 | |
| 105 | const footer = ref(appStore.getFooter) | |
| 106 | ||
| 107 | const footerChange = (show: boolean) => { | |
| 108 | appStore.setFooter(show) | |
| 109 | } | |
| 110 | ||
| 111 | // 灰色模式 | |
| 112 | const greyMode = ref(appStore.getGreyMode) | |
| 113 | ||
| 114 | const greyModeChange = (show: boolean) => { | |
| 115 | appStore.setGreyMode(show) | |
| 116 | } | |
| 117 | ||
| 118 | // 固定菜单 | |
| 119 | const fixedMenu = ref(appStore.getFixedMenu) | |
| 120 | ||
| 121 | const fixedMenuChange = (show: boolean) => { | |
| 122 | appStore.setFixedMenu(show) | |
| 123 | } | |
| 124 | ||
| 125 | // 设置水印 | |
| 126 | const setWater = () => { | |
| 127 | setWatermark(water.value) | |
| 128 | } | |
| 129 | ||
| 130 | const layout = computed(() => appStore.getLayout) | |
| 131 | ||
| 132 | watch( | |
| 133 | () => layout.value, | |
| 134 | (n) => { | |
| 135 | if (n === 'top') { | |
| 136 | appStore.setCollapse(false) | |
| 137 | } | |
| 138 | } | |
| 139 | ) | |
| 140 | </script> | |
| 141 | ||
| 142 | <template> | |
| 143 | <div :class="prefixCls"> | |
| 144 | <div class="flex items-center justify-between"> | |
| 145 | <span class="text-14px">{{ t('setting.breadcrumb') }}</span> | |
| 146 | <ElSwitch v-model="breadcrumb" @change="breadcrumbChange" /> | |
| 147 | </div> | |
| 148 | ||
| 149 | <div class="flex items-center justify-between"> | |
| 150 | <span class="text-14px">{{ t('setting.breadcrumbIcon') }}</span> | |
| 151 | <ElSwitch v-model="breadcrumbIcon" @change="breadcrumbIconChange" /> | |
| 152 | </div> | |
| 153 | ||
| 154 | <div class="flex items-center justify-between"> | |
| 155 | <span class="text-14px">{{ t('setting.hamburgerIcon') }}</span> | |
| 156 | <ElSwitch v-model="hamburger" @change="hamburgerChange" /> | |
| 157 | </div> | |
| 158 | ||
| 159 | <div class="flex items-center justify-between"> | |
| 160 | <span class="text-14px">{{ t('setting.screenfullIcon') }}</span> | |
| 161 | <ElSwitch v-model="screenfull" @change="screenfullChange" /> | |
| 162 | </div> | |
| 163 | ||
| 164 | <div class="flex items-center justify-between"> | |
| 165 | <span class="text-14px">{{ t('setting.sizeIcon') }}</span> | |
| 166 | <ElSwitch v-model="size" @change="sizeChange" /> | |
| 167 | </div> | |
| 168 | ||
| 169 | <div class="flex items-center justify-between"> | |
| 170 | <span class="text-14px">{{ t('setting.localeIcon') }}</span> | |
| 171 | <ElSwitch v-model="locale" @change="localeChange" /> | |
| 172 | </div> | |
| 173 | ||
| 174 | <div class="flex items-center justify-between"> | |
| 175 | <span class="text-14px">{{ t('setting.messageIcon') }}</span> | |
| 176 | <ElSwitch v-model="message" @change="messageChange" /> | |
| 177 | </div> | |
| 178 | ||
| 179 | <div class="flex items-center justify-between"> | |
| 180 | <span class="text-14px">{{ t('setting.tagsView') }}</span> | |
| 181 | <ElSwitch v-model="tagsView" @change="tagsViewChange" /> | |
| 182 | </div> | |
| 183 | ||
| 184 | <div class="flex items-center justify-between"> | |
| 185 | <span class="text-14px">{{ t('setting.tagsViewIcon') }}</span> | |
| 186 | <ElSwitch v-model="tagsViewIcon" @change="tagsViewIconChange" /> | |
| 187 | </div> | |
| 188 | ||
| 189 | <div class="flex items-center justify-between"> | |
| 190 | <span class="text-14px">{{ t('setting.logo') }}</span> | |
| 191 | <ElSwitch v-model="logo" @change="logoChange" /> | |
| 192 | </div> | |
| 193 | ||
| 194 | <div class="flex items-center justify-between"> | |
| 195 | <span class="text-14px">{{ t('setting.uniqueOpened') }}</span> | |
| 196 | <ElSwitch v-model="uniqueOpened" @change="uniqueOpenedChange" /> | |
| 197 | </div> | |
| 198 | ||
| 199 | <div class="flex items-center justify-between"> | |
| 200 | <span class="text-14px">{{ t('setting.fixedHeader') }}</span> | |
| 201 | <ElSwitch v-model="fixedHeader" @change="fixedHeaderChange" /> | |
| 202 | </div> | |
| 203 | ||
| 204 | <div class="flex items-center justify-between"> | |
| 205 | <span class="text-14px">{{ t('setting.footer') }}</span> | |
| 206 | <ElSwitch v-model="footer" @change="footerChange" /> | |
| 207 | </div> | |
| 208 | ||
| 209 | <div class="flex items-center justify-between"> | |
| 210 | <span class="text-14px">{{ t('setting.greyMode') }}</span> | |
| 211 | <ElSwitch v-model="greyMode" @change="greyModeChange" /> | |
| 212 | </div> | |
| 213 | ||
| 214 | <div class="flex items-center justify-between"> | |
| 215 | <span class="text-14px">{{ t('setting.fixedMenu') }}</span> | |
| 216 | <ElSwitch v-model="fixedMenu" @change="fixedMenuChange" /> | |
| 217 | </div> | |
| 218 | ||
| 219 | <div class="flex items-center justify-between"> | |
| 220 | <span class="text-14px">{{ t('watermark.watermark') }}</span> | |
| 221 | <ElInput v-model="water" class="right-1 w-20" @change="setWater()" /> | |
| 222 | </div> | |
| 223 | </div> | |
| 224 | </template> | |
