taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor ts

Browse Source
This commit is contained in:
LiuHao
2023-04-02 01:01:56 +08:00
parent 5c87f1cb2c
commit 251d2411f2
264 changed files with 15432 additions and 13015 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/layout/index.vue
View File

@ -1,30 +1,11 @@
<template>
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
<div :class="{ 'fixed-header': fixedHeader }">
<navbar ref="navbarRef" @setLayout="setLayout" />
<tags-view v-if="needTagsView" />
</div>
<app-main />
<settings ref="settingRef" />
</div>
</div>
</template>
<script setup>
import { useWindowSize } from '@vueuse/core'
import Sidebar from './components/Sidebar/index.vue'
<script setup lang="ts">
import SideBar from './components/Sidebar/index.vue'
import { AppMain, Navbar, Settings, TagsView } from './components'
import defaultSettings from '@/settings'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
const theme = computed(() => settingsStore.theme);
const sideTheme = computed(() => settingsStore.sideTheme);
const sidebar = computed(() => useAppStore().sidebar);
const device = computed(() => useAppStore().device);
const needTagsView = computed(() => settingsStore.tagsView);
@ -37,8 +18,7 @@ const classObj = computed(() => ({
mobile: device.value === 'mobile'
}))
const { proxy } = getCurrentInstance();
const { width, height } = useWindowSize();
const { width } = useWindowSize();
const WIDTH = 992; // refer to Bootstrap's responsive design
watchEffect(() => {
@ -53,7 +33,8 @@ watchEffect(() => {
}
})
const navbarRef = ref(null);
const navbarRef = ref(Navbar);
const settingRef = ref(Settings);
onMounted(() => {
nextTick(() => {
@ -61,16 +42,30 @@ onMounted(() => {
})
})
function handleClickOutside() {
const handleClickOutside = () => {
useAppStore().closeSideBar({ withoutAnimation: false })
}
const settingRef = ref(null);
function setLayout() {
const setLayout = () => {
settingRef.value.openSetting();
}
</script>
<template>
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<side-bar v-if="!sidebar.hide" class="sidebar-container" />
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
<div :class="{ 'fixed-header': fixedHeader }">
<navbar ref="navbarRef" @setLayout="setLayout" />
<tags-view v-if="needTagsView" />
</div>
<app-main />
<settings ref="settingRef" />
</div>
</div>
</template>
<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/variables.module.scss";
@ -117,4 +112,4 @@ function setLayout() {
.mobile .fixed-header {
width: 100%;
}
</style>
</style>