小时费率

src/layout/index.vue

@@ -1,111 +1,135 @@
 <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/>
-        <tags-view v-if="needTagsView"/>
+  <div
+    :class="classObj"
+    :style="{ '--current-color': theme }"
+    class="app-wrapper"
+    v-if="!isQIANKUN"
+  >
+    <div
+      v-if="device === 'mobile' && sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside"
+    />
+    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
+    <div :class="{ 'fixed-header': fixedHeader }">
+      <navbar @setLayout="setLayout" />
+      <div class="tags-view-container-box">
+        <tags-view v-if="needTagsView" />
       </div>
-      <app-main/>
-      <right-panel>
-        <settings/>
-      </right-panel>
+    </div>
+    <div
+      :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
+      class="main-container"
+    >
+      <app-main />
+      <settings ref="settingRef" />
     </div>
   </div>
+  <app-main v-else />
 </template>
 
-<script>
-import RightPanel from '@/components/RightPanel'
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import { mapState } from 'vuex'
-import variables from '@/assets/styles/variables.scss'
+<script setup>
+import { useWindowSize } from "@vueuse/core";
+import Sidebar from "./components/Sidebar/index.vue";
+import { AppMain, Navbar, Settings, TagsView } from "./components";
 
-export default {
-  name: 'Layout',
-  components: {
-    AppMain,
-    Navbar,
-    RightPanel,
-    Settings,
-    Sidebar,
-    TagsView
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    ...mapState({
-      theme: state => state.settings.theme,
-      sideTheme: state => state.settings.sideTheme,
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    },
-    variables() {
-      return variables;
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
-    }
+import useAppStore from "@/store/modules/app";
+import useSettingsStore from "@/store/modules/settings";
+import { qiankunWindow } from "vite-plugin-qiankun/dist/helper";
+
+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);
+const fixedHeader = computed(() => settingsStore.fixedHeader);
+
+const classObj = computed(() => ({
+  hideSidebar: !sidebar.value.opened,
+  openSidebar: sidebar.value.opened,
+  withoutAnimation: sidebar.value.withoutAnimation,
+  mobile: device.value === "mobile"
+}));
+
+const { width, height } = useWindowSize();
+const WIDTH = 992; // refer to Bootstrap's responsive design
+const isQIANKUN = computed(() => qiankunWindow.__POWERED_BY_QIANKUN__);
+watchEffect(() => {
+  if (device.value === "mobile" && sidebar.value.opened) {
+    useAppStore().closeSideBar({ withoutAnimation: false });
   }
+  if (width.value - 1 < WIDTH) {
+    useAppStore().toggleDevice("mobile");
+    useAppStore().closeSideBar({ withoutAnimation: true });
+  } else {
+    useAppStore().toggleDevice("desktop");
+  }
+});
+
+function handleClickOutside() {
+  useAppStore().closeSideBar({ withoutAnimation: false });
+}
+
+const settingRef = ref(null);
+function setLayout() {
+  settingRef.value.openSetting();
 }
 </script>
 
-<style lang="scss" scoped>
-  @import "~@/assets/styles/mixin.scss";
-  @import "~@/assets/styles/variables.scss";
+<!-- <style lang="scss" scoped>
+@import "@/assets/styles/mixin.scss";
+@import "@/assets/styles/variables.module.scss";
 
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
 
-    &.mobile.openSidebar {
-      position: fixed;
-      top: 0;
-    }
-  }
-
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-
-  .fixed-header {
+  &.mobile.openSidebar {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$base-sidebar-width});
-    transition: width 0.28s;
   }
+}
 
-  .hideSidebar .fixed-header {
-    width: calc(100% - 54px);
-  }
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 
-  .sidebarHide .fixed-header {
-    width: 100%;
-  }
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$base-sidebar-width});
+  transition: width 0.28s;
+}
 
-  .mobile .fixed-header {
-    width: 100%;
-  }
-</style>
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+.hideSidebar .tags-view-container-box {
+  width: calc(100% - 54px);
+  margin-left: 54px;
+}
+
+.tags-view-container-box {
+  width: calc(100% - 200px);
+  margin-left: #{$base-sidebar-width};
+  transition: margin-left 0.28s;
+}
+.sidebarHide .fixed-header {
+  width: 100%;
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
+</style> -->