diff --git a/src/layouts/components/header/Header.vue b/src/layouts/components/header/Header.vue
index 97bc3b0..6319ccc 100644
--- a/src/layouts/components/header/Header.vue
+++ b/src/layouts/components/header/Header.vue
@@ -1,8 +1,14 @@
-
+
-
+
+
+
diff --git a/src/layouts/components/header/NavDrawer.vue b/src/layouts/components/header/NavDrawer.vue
new file mode 100644
index 0000000..ffe24d7
--- /dev/null
+++ b/src/layouts/components/header/NavDrawer.vue
@@ -0,0 +1,211 @@
+
+
- ![logo]()
+ ![logo]()
@@ -64,11 +70,12 @@
![avatar]()
+
+
+
+
+
+
diff --git a/src/main.ts b/src/main.ts
index 48291ae..d1a4664 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,7 @@
import { createApp } from 'vue'
import { VueSvgIconPlugin } from '@yzfe/vue3-svgicon'
import '@yzfe/svgicon/lib/svgicon.css'
+import 'animate.css/animate.css'
import App from './App.vue'
import router from './router'
import { storeProviderPlugin } from './hooks/store'
diff --git a/src/styles/index.scss b/src/styles/index.scss
index bfdcc91..aba06eb 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1 +1,4 @@
@use 'mdc';
+@use './mixins/perfect-scrollbar';
+
+@include perfect-scrollbar.core-styles;
diff --git a/src/styles/mixins/_perfect-scrollbar.scss b/src/styles/mixins/_perfect-scrollbar.scss
new file mode 100644
index 0000000..a0260e3
--- /dev/null
+++ b/src/styles/mixins/_perfect-scrollbar.scss
@@ -0,0 +1,127 @@
+@mixin core-styles {
+ /**
+ * https://github.com/mdbootstrap/perfect-scrollbar/blob/master/css/perfect-scrollbar.css
+ */
+
+ /*
+ * Container style
+ */
+ .ps {
+ overflow: hidden !important;
+ overflow-anchor: none;
+ -ms-overflow-style: none;
+ touch-action: auto;
+ -ms-touch-action: auto;
+ }
+
+ /*
+ * Scrollbar rail styles
+ */
+ .ps__rail-x {
+ display: none;
+ opacity: 0;
+ transition: background-color 0.2s linear, opacity 0.2s linear;
+ -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
+ height: 15px;
+ /* there must be 'bottom' or 'top' for ps__rail-x */
+ bottom: 0px;
+ /* please don't change 'position' */
+ position: absolute;
+ }
+
+ .ps__rail-y {
+ display: none;
+ opacity: 0;
+ transition: background-color 0.2s linear, opacity 0.2s linear;
+ -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
+ width: 15px;
+ /* there must be 'right' or 'left' for ps__rail-y */
+ right: 0;
+ /* please don't change 'position' */
+ position: absolute;
+ }
+
+ .ps--active-x > .ps__rail-x,
+ .ps--active-y > .ps__rail-y {
+ display: block;
+ background-color: transparent;
+ }
+
+ .ps:hover > .ps__rail-x,
+ .ps:hover > .ps__rail-y,
+ .ps--focus > .ps__rail-x,
+ .ps--focus > .ps__rail-y,
+ .ps--scrolling-x > .ps__rail-x,
+ .ps--scrolling-y > .ps__rail-y {
+ opacity: 0.6;
+ }
+
+ .ps .ps__rail-x:hover,
+ .ps .ps__rail-y:hover,
+ .ps .ps__rail-x:focus,
+ .ps .ps__rail-y:focus,
+ .ps .ps__rail-x.ps--clicking,
+ .ps .ps__rail-y.ps--clicking {
+ background-color: #eee;
+ opacity: 0.9;
+ }
+
+ /*
+ * Scrollbar thumb styles
+ */
+ .ps__thumb-x {
+ background-color: #aaa;
+ border-radius: 6px;
+ transition: background-color 0.2s linear, height 0.2s ease-in-out;
+ -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
+ height: 6px;
+ /* there must be 'bottom' for ps__thumb-x */
+ bottom: 2px;
+ /* please don't change 'position' */
+ position: absolute;
+ }
+
+ .ps__thumb-y {
+ background-color: #aaa;
+ border-radius: 6px;
+ transition: background-color 0.2s linear, width 0.2s ease-in-out;
+ -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
+ width: 6px;
+ /* there must be 'right' for ps__thumb-y */
+ right: 2px;
+ /* please don't change 'position' */
+ position: absolute;
+ }
+
+ .ps__rail-x:hover > .ps__thumb-x,
+ .ps__rail-x:focus > .ps__thumb-x,
+ .ps__rail-x.ps--clicking .ps__thumb-x {
+ background-color: #999;
+ height: 11px;
+ }
+
+ .ps__rail-y:hover > .ps__thumb-y,
+ .ps__rail-y:focus > .ps__thumb-y,
+ .ps__rail-y.ps--clicking .ps__thumb-y {
+ background-color: #999;
+ width: 11px;
+ }
+
+ /* MS supports */
+ @supports (-ms-overflow-style: none) {
+ .ps {
+ overflow: auto !important;
+ }
+ }
+
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ .ps {
+ overflow: auto !important;
+ }
+ }
+
+ /* fixup */
+ .ps__rail-y {
+ left: auto !important;
+ }
+}
diff --git a/src/utils/getScrollBarWidth.ts b/src/utils/getScrollBarWidth.ts
new file mode 100644
index 0000000..687cc22
--- /dev/null
+++ b/src/utils/getScrollBarWidth.ts
@@ -0,0 +1,15 @@
+const getScrollbarWidth = () => {
+ let div1 = document.createElement('div')
+ let div2 = document.createElement('div')
+ div1.style.width = div2.style.width = div1.style.height = div2.style.height = '100px'
+ div1.style.overflow = 'scroll'
+ div2.style.overflow = 'hidden'
+ document.body.appendChild(div1)
+ document.body.appendChild(div2)
+ const scrollbarWidth = Math.abs(div1.scrollHeight - div2.scrollHeight)
+ document.body.removeChild(div1)
+ document.body.removeChild(div2)
+ return scrollbarWidth
+}
+
+export default getScrollbarWidth
diff --git a/src/utils/sakuraOptions.ts b/src/utils/sakuraOptions.ts
new file mode 100644
index 0000000..b22c83d
--- /dev/null
+++ b/src/utils/sakuraOptions.ts
@@ -0,0 +1,9 @@
+import type { SakuraOptions as SakuraOptionsAbstract } from '@/admin/optionsType'
+
+export interface SakuraOptions extends SakuraOptionsAbstract {
+ [namespace: string]: any
+}
+
+const config = (window as any).InitState.config as SakuraOptions
+
+export default config
diff --git a/src/views/Home.vue b/src/views/Home.vue
index b84c3e7..8bcab4b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,5 +1,5 @@
-
+
+
+
+ Hello world...
+
+
+
+
+
+
+
+