-
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layout/components/NavigationBar/index.vue b/src/layout/components/NavigationBar/index.vue
new file mode 100644
index 0000000..f5b774a
--- /dev/null
+++ b/src/layout/components/NavigationBar/index.vue
@@ -0,0 +1,102 @@
+
+
+
+
+
+
+
+
diff --git a/src/layout/components/RightPanel/index.vue b/src/layout/components/RightPanel/index.vue
new file mode 100644
index 0000000..4f2fd58
--- /dev/null
+++ b/src/layout/components/RightPanel/index.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..24de9ec
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,118 @@
+
+
+
+
+ + 系统布局配置 +
+
+ 显示 Tags-View
+
+
+ 显示侧边栏 Logo
+
+
+ 固定 Header
+
+
+ 显示换肤按钮
+
+
+ 显示全屏按钮
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layout/components/Sidebar/SidebarItemLink.vue b/src/layout/components/Sidebar/SidebarItemLink.vue
new file mode 100644
index 0000000..a5218ee
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItemLink.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
diff --git a/src/layout/components/Sidebar/SidebarLogo.vue b/src/layout/components/Sidebar/SidebarLogo.vue
new file mode 100644
index 0000000..7ec5850
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarLogo.vue
@@ -0,0 +1,77 @@
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..5cb1a42
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..eec31e4
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/layout/useResize.ts b/src/layout/useResize.ts
new file mode 100644
index 0000000..d831378
--- /dev/null
+++ b/src/layout/useResize.ts
@@ -0,0 +1,68 @@
+import { useAppStore, DeviceType } from '@/store/modules/app'
+import { computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+/** 参考 Bootstrap 的响应式设计 width = 992 */
+const WIDTH = 992
+
+/** 根据大小变化重新布局 */
+export default function() {
+ const appStore = useAppStore()
+
+ const device = computed(() => {
+ return appStore.device
+ })
+
+ const sidebar = computed(() => {
+ return appStore.sidebar
+ })
+
+ const currentRoute = useRoute()
+
+ const watchRouter = watch(
+ () => currentRoute.name,
+ () => {
+ if (appStore.device === DeviceType.Mobile && appStore.sidebar.opened) {
+ appStore.closeSidebar(false)
+ }
+ }
+ )
+
+ const isMobile = () => {
+ const rect = document.body.getBoundingClientRect()
+ return rect.width - 1 < WIDTH
+ }
+
+ const resizeMounted = () => {
+ if (isMobile()) {
+ appStore.toggleDevice(DeviceType.Mobile)
+ appStore.closeSidebar(true)
+ }
+ }
+
+ const resizeHandler = () => {
+ if (!document.hidden) {
+ appStore.toggleDevice(isMobile() ? DeviceType.Mobile : DeviceType.Desktop)
+ if (isMobile()) {
+ appStore.closeSidebar(true)
+ }
+ }
+ }
+
+ const addEventListenerOnResize = () => {
+ window.addEventListener('resize', resizeHandler)
+ }
+
+ const removeEventListenerResize = () => {
+ window.removeEventListener('resize', resizeHandler)
+ }
+
+ return {
+ device,
+ sidebar,
+ resizeMounted,
+ addEventListenerOnResize,
+ removeEventListenerResize,
+ watchRouter
+ }
+}
diff --git a/src/main.ts b/src/main.ts
index 01433bc..9a97399 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,19 @@
-import { createApp } from 'vue'
+import { createApp, Directive } from 'vue'
import App from './App.vue'
+import router from './router'
+import store from './store'
+import '@/styles/index.scss'
+import 'normalize.css'
+import * as directives from '@/directives'
+import '@/router/permission'
+import loadSvg from '@/icons'
-createApp(App).mount('#app')
+const app = createApp(App)
+// 加载全局 SVG
+loadSvg(app)
+// 自定义指令
+Object.keys(directives).forEach((key) => {
+ app.directive(key, (directives as { [key: string]: Directive })[key])
+})
+
+app.use(store).use(router).mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..b038dd3
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,134 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+const Layout = () => import('@/layout/index.vue')
+
+/** 常驻路由 */
+export const constantRoutes: Array
+
+
+
+
+ Admin 权限可见
+
+
diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue
new file mode 100644
index 0000000..66b985f
--- /dev/null
+++ b/src/views/dashboard/editor/index.vue
@@ -0,0 +1,6 @@
+
+
+
+ Editor 权限可见
+
+
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
new file mode 100644
index 0000000..673502c
--- /dev/null
+++ b/src/views/dashboard/index.vue
@@ -0,0 +1,20 @@
+
+
+
+
diff --git a/src/views/error-page/404.vue b/src/views/error-page/404.vue
new file mode 100644
index 0000000..53ebf5d
--- /dev/null
+++ b/src/views/error-page/404.vue
@@ -0,0 +1,10 @@
+
+ + 401 +
++ 你没有权限去该页面 +
+
+
+
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
new file mode 100644
index 0000000..ef60d34
--- /dev/null
+++ b/src/views/login/index.vue
@@ -0,0 +1,220 @@
+
+ + 404 +
++ 未找到你想要的页面 +
+
+
+
+
+
+
+
diff --git a/src/views/permission/components/switch-roles.vue b/src/views/permission/components/switch-roles.vue
new file mode 100644
index 0000000..95e04ff
--- /dev/null
+++ b/src/views/permission/components/switch-roles.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+ 登 录
+
+
+
+
+
+
+
+
diff --git a/src/views/permission/directive.vue b/src/views/permission/directive.vue
new file mode 100644
index 0000000..fb47032
--- /dev/null
+++ b/src/views/permission/directive.vue
@@ -0,0 +1,92 @@
+
+
+
+ 你的权限：{{ roles }}
+
+
+ 切换权限：
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/permission/page.vue b/src/views/permission/page.vue
new file mode 100644
index 0000000..87ef54b
--- /dev/null
+++ b/src/views/permission/page.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+ v-permission="['admin']"
+
+
+
+
+
+ v-permission="['editor']"
+
+
+
+
+
+ v-permission="['admin', 'editor']"
+
+
+
+
+ 在某些情况下，不适合使用 v-permission。例如：element-plus 的 el-tab 或 el-table-column 以及其它动态渲染 dom
+ 的场景。你只能通过手动设置 v-if 来实现。
+
+
+
+ admin 可以看见这个
+
+ v-if="checkPermission(['admin'])"
+
+
+
+
+ editor 可以看见这个
+
+ v-if="checkPermission(['editor'])"
+
+
+
+
+ 两者 admin 和 editor 都可以看见这个
+
+ v-if="checkPermission(['admin', 'editor'])"
+
+
+
+
+
+
+ 当前页面只有 admin 权限可见
+
+
+
+
+
diff --git a/src/views/redirect/index.vue b/src/views/redirect/index.vue
new file mode 100644
index 0000000..aedd81e
--- /dev/null
+++ b/src/views/redirect/index.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
diff --git a/vite.config.ts b/vite.config.ts
index d3202ee..c08205a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,4 @@
-import { ConfigEnv, UserConfigExport } from 'vite'
+import { UserConfigExport } from 'vite'
import path, { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
@@ -7,7 +7,7 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
/** 配置项文档：https://vitejs.dev/config */
-export default (env: ConfigEnv): UserConfigExport => {
+export default (): UserConfigExport => {
return {
/** build 打包时根据实际情况修改 base */
base: '/',