index.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
  1. <template>
  2. <div class="wh-full" :class="classObj">
  3. <!-- 遮罩层 -->
  4. <div
  5. v-if="classObj.mobile && classObj.openSidebar"
  6. class="wh-full fixed-lt z-999 bg-black bg-opacity-30"
  7. @click="handleOutsideClick"
  8. ></div>
  9. <!-- 公用侧边栏 -->
  10. <Sidebar class="sidebar-container" />
  11. <!-- 混合布局 -->
  12. <div v-if="layout === 'mix'" class="mix-container">
  13. <div class="mix-container__left">
  14. <el-scrollbar style="height: 100%; background-color: #304156">
  15. <SidebarMenu
  16. :menu-list="mixLeftMenus"
  17. :base-path="activeTopMenuPath"
  18. />
  19. <div
  20. style="width: 100%; height: 50px; background-color: #304156"
  21. ></div>
  22. <div class="sidebar-toggle" style="background-color: #304156">
  23. <hamburger
  24. :is-active="appStore.sidebar.opened"
  25. @toggle-click="toggleSidebar"
  26. />
  27. </div>
  28. </el-scrollbar>
  29. </div>
  30. <div :class="{ hasTagsView: showTagsView }" class="main-container">
  31. <div :class="{ 'fixed-header': fixedHeader }">
  32. <TagsView v-if="showTagsView" />
  33. </div>
  34. <AppMain />
  35. <Settings v-if="defaultSettings.showSettings" />
  36. </div>
  37. </div>
  38. <!-- 左侧和顶部布局 -->
  39. <div v-else :class="{ hasTagsView: showTagsView }" class="main-container">
  40. <div :class="{ 'fixed-header': fixedHeader }">
  41. <NavBar v-if="layout === 'left'" />
  42. <TagsView v-if="showTagsView" />
  43. </div>
  44. <AppMain />
  45. <Settings v-if="defaultSettings.showSettings" />
  46. </div>
  47. </div>
  48. </template>
  49. <script setup lang="ts">
  50. import { useAppStore, useSettingsStore, usePermissionStore } from "@/store";
  51. import defaultSettings from "@/settings";
  52. import { DeviceEnum } from "@/enums/DeviceEnum";
  53. const appStore = useAppStore();
  54. const settingsStore = useSettingsStore();
  55. const permissionStore = usePermissionStore();
  56. const fixedHeader = computed(() => settingsStore.fixedHeader); // 是否固定header
  57. const showTagsView = computed(() => settingsStore.tagsView); // 是否显示tagsView
  58. const layout = computed(() => settingsStore.layout); // 布局模式 left top mix
  59. const activeTopMenuPath = computed(() => appStore.activeTopMenuPath); // 顶部菜单激活path
  60. const mixLeftMenus = computed(() => permissionStore.mixLeftMenus); // 混合布局左侧菜单
  61. watch(
  62. () => activeTopMenuPath.value,
  63. (newVal) => {
  64. permissionStore.setMixLeftMenus(newVal);
  65. },
  66. {
  67. deep: true,
  68. immediate: true,
  69. }
  70. );
  71. const classObj = computed(() => ({
  72. hideSidebar: !appStore.sidebar.opened,
  73. openSidebar: appStore.sidebar.opened,
  74. mobile: appStore.device === DeviceEnum.MOBILE,
  75. "layout-left": layout.value === "left",
  76. "layout-top": layout.value === "top",
  77. "layout-mix": layout.value === "mix",
  78. }));
  79. const width = useWindowSize().width;
  80. const WIDTH = 992; // 响应式布局容器固定宽度 大屏(>=1200px) 中屏(>=992px) 小屏(>=768px)
  81. watchEffect(() => {
  82. if (width.value < WIDTH) {
  83. appStore.toggleDevice(DeviceEnum.MOBILE);
  84. appStore.closeSideBar();
  85. } else {
  86. appStore.toggleDevice(DeviceEnum.DESKTOP);
  87. if (width.value >= 1200) {
  88. appStore.openSideBar();
  89. } else {
  90. appStore.closeSideBar();
  91. }
  92. }
  93. });
  94. function handleOutsideClick() {
  95. appStore.closeSideBar();
  96. }
  97. function toggleSidebar() {
  98. appStore.toggleSidebar();
  99. }
  100. </script>
  101. <style lang="scss" scoped>
  102. .fixed-header {
  103. position: fixed;
  104. top: 0;
  105. right: 0;
  106. z-index: 9;
  107. width: calc(100% - $sidebar-width);
  108. transition: width 0.28s;
  109. }
  110. .sidebar-container {
  111. position: fixed;
  112. top: 0;
  113. bottom: 0;
  114. left: 0;
  115. z-index: 999;
  116. width: $sidebar-width;
  117. height: 100%;
  118. overflow: hidden;
  119. background-color: $menu-background;
  120. transition: width 0.28s;
  121. :deep(.el-menu) {
  122. border: none;
  123. }
  124. }
  125. .main-container {
  126. position: relative;
  127. min-height: 100%;
  128. margin-left: $sidebar-width;
  129. transition: margin-left 0.28s;
  130. }
  131. .layout-top {
  132. .fixed-header {
  133. top: $navbar-height;
  134. width: 100%;
  135. }
  136. .sidebar-container {
  137. z-index: 999;
  138. display: flex;
  139. width: 100% !important;
  140. height: $navbar-height;
  141. :deep(.el-scrollbar) {
  142. flex: 1;
  143. height: $navbar-height;
  144. }
  145. :deep(.el-menu-item),
  146. :deep(.el-sub-menu__title),
  147. :deep(.el-menu--horizontal) {
  148. height: $navbar-height;
  149. line-height: $navbar-height;
  150. }
  151. :deep(.el-menu--collapse) {
  152. width: 100%;
  153. }
  154. }
  155. .main-container {
  156. min-height: calc(100vh - $navbar-height);
  157. padding-top: $navbar-height;
  158. margin-left: 0;
  159. }
  160. }
  161. .layout-mix {
  162. .sidebar-container {
  163. width: 100% !important;
  164. height: $navbar-height;
  165. :deep(.el-scrollbar) {
  166. flex: 1;
  167. height: $navbar-height;
  168. }
  169. :deep(.el-menu-item),
  170. :deep(.el-sub-menu__title),
  171. :deep(.el-menu--horizontal) {
  172. height: $navbar-height;
  173. line-height: $navbar-height;
  174. }
  175. :deep(.el-menu--horizontal.el-menu) {
  176. border: none;
  177. }
  178. }
  179. .mix-container {
  180. display: flex;
  181. height: 100%;
  182. padding-top: $navbar-height;
  183. .mix-container__left {
  184. position: relative;
  185. width: $sidebar-width;
  186. height: 100%;
  187. :deep(.el-menu) {
  188. height: 100%;
  189. border: none;
  190. }
  191. .sidebar-toggle {
  192. position: absolute;
  193. bottom: 0;
  194. display: flex;
  195. align-items: center;
  196. justify-content: center;
  197. width: 100%;
  198. height: 50px;
  199. line-height: 50px;
  200. box-shadow: 0 0 6px -2px var(--el-color-primary);
  201. div:hover {
  202. background-color: var(--menu-background);
  203. }
  204. :deep(svg) {
  205. color: var(--el-color-primary) !important;
  206. }
  207. }
  208. }
  209. .main-container {
  210. flex: 1;
  211. min-width: 0;
  212. margin-left: 0;
  213. .fixed-header {
  214. top: $navbar-height;
  215. }
  216. }
  217. }
  218. }
  219. .hideSidebar {
  220. .fixed-header {
  221. left: $sidebar-width-collapsed;
  222. width: calc(100% - $sidebar-width-collapsed);
  223. }
  224. .main-container {
  225. margin-left: $sidebar-width-collapsed;
  226. }
  227. &.layout-top {
  228. .fixed-header {
  229. left: 0;
  230. width: 100%;
  231. }
  232. .main-container {
  233. margin-left: 0;
  234. }
  235. }
  236. &.layout-mix {
  237. .fixed-header {
  238. left: $sidebar-width-collapsed;
  239. width: calc(100% - $sidebar-width-collapsed);
  240. }
  241. .sidebar-container {
  242. width: 100% !important;
  243. }
  244. .mix-container {
  245. .mix-container__left {
  246. width: $sidebar-width-collapsed;
  247. }
  248. }
  249. }
  250. }
  251. .layout-left.hideSidebar {
  252. .sidebar-container {
  253. width: $sidebar-width-collapsed !important;
  254. }
  255. .main-container {
  256. margin-left: $sidebar-width-collapsed;
  257. }
  258. &.mobile {
  259. .sidebar-container {
  260. pointer-events: none;
  261. transition-duration: 0.3s;
  262. transform: translate3d(-210px, 0, 0);
  263. }
  264. .main-container {
  265. margin-left: 0;
  266. }
  267. }
  268. }
  269. .mobile {
  270. .fixed-header {
  271. left: 0;
  272. width: 100%;
  273. }
  274. .main-container {
  275. margin-left: 0;
  276. }
  277. &.layout-top {
  278. .sidebar-container {
  279. z-index: 999;
  280. display: flex;
  281. width: 100% !important;
  282. height: $navbar-height;
  283. :deep(.el-scrollbar) {
  284. flex: 1;
  285. min-width: 0;
  286. height: $navbar-height;
  287. }
  288. }
  289. .main-container {
  290. padding-top: $navbar-height;
  291. margin-left: 0;
  292. overflow: hidden;
  293. }
  294. // 顶部模式全局变量修改
  295. --el-menu-item-height: $navbar-height;
  296. }
  297. }
  298. :deep(.el-input-number) {
  299. }
  300. // :deep(.el-collapse-item__content) {
  301. // padding: 18px 0 15px 10px;
  302. // margin-bottom: 10px;
  303. // background-color: var(--el-bg-color-overlay);
  304. // border: 1px solid var(--el-border-color-light);
  305. // border-radius: 4px;
  306. // box-shadow: var(--el-box-shadow-light);
  307. // }
  308. </style>