feat(projects): 新增BasicLayout布局

2022-01-07 00:26:59 +08:00 · 2022-01-07 00:26:59 +08:00 · 006467a062
commit 006467a062
parent 0c5770dfd2
13 changed files with 150 additions and 81 deletions
--- a/README.md
+++ b/README.md
@ -1,35 +1,3 @@
 # soybean-admin-thin

-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
-
-## Type Support for `.vue` Imports in TS
-
-Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
-
-However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
+soybean-admin重构版，新添加动态权限路由
--- a/package.json
+++ b/package.json
@ -37,7 +37,7 @@
  "devDependencies": {
    "@commitlint/cli": "^16.0.1",
    "@commitlint/config-conventional": "^16.0.0",
-    "@iconify/json": "^1.1.452",
+    "@iconify/json": "^1.1.453",
    "@iconify/vue": "^3.1.1",
    "@types/crypto-js": "^4.1.0",
    "@types/node": "^17.0.8",
@ -64,7 +64,7 @@
    "postinstall-postinstall": "^2.1.0",
    "prettier": "^2.5.1",
    "rollup-plugin-visualizer": "^5.5.2",
-    "sass": "^1.45.2",
+    "sass": "^1.46.0",
    "typescript": "^4.5.4",
    "unplugin-icons": "^0.13.0",
    "unplugin-vue-components": "^0.17.11",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -3,7 +3,7 @@ lockfileVersion: 5.3
 specifiers:
  '@commitlint/cli': ^16.0.1
  '@commitlint/config-conventional': ^16.0.0
-  '@iconify/json': ^1.1.452
+  '@iconify/json': ^1.1.453
  '@iconify/vue': ^3.1.1
  '@types/crypto-js': ^4.1.0
  '@types/node': ^17.0.8
@ -40,7 +40,7 @@ specifiers:
  prettier: ^2.5.1
  qs: ^6.10.2
  rollup-plugin-visualizer: ^5.5.2
-  sass: ^1.45.2
+  sass: ^1.46.0
  typescript: ^4.5.4
  unplugin-icons: ^0.13.0
  unplugin-vue-components: ^0.17.11
@ -71,7 +71,7 @@ dependencies:
 devDependencies:
  '@commitlint/cli': registry.npmmirror.com/@commitlint/cli/16.0.1_@types+node@17.0.8
  '@commitlint/config-conventional': registry.npmmirror.com/@commitlint/config-conventional/16.0.0
-  '@iconify/json': registry.npmmirror.com/@iconify/json/1.1.452
+  '@iconify/json': registry.npmmirror.com/@iconify/json/1.1.453
  '@iconify/vue': registry.npmmirror.com/@iconify/vue/3.1.1_vue@3.2.26
  '@types/crypto-js': registry.npmmirror.com/@types/crypto-js/4.1.0
  '@types/node': registry.npmmirror.com/@types/node/17.0.8
@ -98,11 +98,11 @@ devDependencies:
  postinstall-postinstall: registry.npmmirror.com/postinstall-postinstall/2.1.0
  prettier: registry.npmmirror.com/prettier/2.5.1
  rollup-plugin-visualizer: registry.nlark.com/rollup-plugin-visualizer/5.5.2
-  sass: registry.npmmirror.com/sass/1.45.2
+  sass: registry.npmmirror.com/sass/1.46.0
  typescript: registry.npmmirror.com/typescript/4.5.4
  unplugin-icons: registry.npmmirror.com/unplugin-icons/0.13.0_vite@2.7.10
  unplugin-vue-components: registry.npmmirror.com/unplugin-vue-components/0.17.11_vite@2.7.10+vue@3.2.26
-  vite: registry.npmmirror.com/vite/2.7.10_sass@1.45.2
+  vite: registry.npmmirror.com/vite/2.7.10_sass@1.46.0
  vite-plugin-html: registry.npmmirror.com/vite-plugin-html/2.1.2_vite@2.7.10
  vite-plugin-mock: registry.npmmirror.com/vite-plugin-mock/2.9.6_mockjs@1.1.0+vite@2.7.10
  vite-plugin-windicss: registry.npmmirror.com/vite-plugin-windicss/1.6.1_vite@2.7.10
@ -2163,13 +2163,6 @@ packages:
    engines: {node: '>=8'}
    dev: true

-  registry.nlark.com/picomatch/2.3.0:
-    resolution: {integrity: sha1-8fBh3o9qS/AiiS4tEoI0+5gwKXI=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/picomatch/download/picomatch-2.3.0.tgz}
-    name: picomatch
-    version: 2.3.0
-    engines: {node: '>=8.6'}
-    dev: true
-
  registry.nlark.com/prelude-ls/1.2.1:
    resolution: {integrity: sha1-3rxkidem5rDnYRiIzsiAM30xY5Y=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/prelude-ls/download/prelude-ls-1.2.1.tgz}
    name: prelude-ls
@ -3363,10 +3356,10 @@ packages:
    version: 1.2.1
    dev: true

-  registry.npmmirror.com/@iconify/json/1.1.452:
-    resolution: {integrity: sha512-3eUNfCvfap5dE4JUePnul+3wCuWMSqD1zC9oGHqob5FRbJ05tGQ/n0FsL7WthqO5C+dLaMUMNRRG5VRwMzyYfA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@iconify/json/download/@iconify/json-1.1.452.tgz}
+  registry.npmmirror.com/@iconify/json/1.1.453:
+    resolution: {integrity: sha512-ib+e1kwbIXGf2AuDYNN3HIgfq5q3ejAsgxdCAvhXMHmT0XZXUi2ZVAXVhOsTLmTvE8kydbSeJ1nDjPrl3KnXCw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@iconify/json/download/@iconify/json-1.1.453.tgz}
    name: '@iconify/json'
-    version: 1.1.452
+    version: 1.1.453
    dev: true

  registry.npmmirror.com/@iconify/types/1.0.12:
@ -3443,7 +3436,7 @@ packages:
    engines: {node: '>= 8.0.0'}
    dependencies:
      estree-walker: registry.npmmirror.com/estree-walker/2.0.2
-      picomatch: registry.nlark.com/picomatch/2.3.0
+      picomatch: registry.npmmirror.com/picomatch/2.3.0
    dev: true

  registry.npmmirror.com/@types/crypto-js/4.1.0:
@ -3756,7 +3749,7 @@ packages:
      vite: ^2.5.10
      vue: ^3.2.25
    dependencies:
-      vite: registry.npmmirror.com/vite/2.7.10_sass@1.45.2
+      vite: registry.npmmirror.com/vite/2.7.10_sass@1.46.0
      vue: registry.npmmirror.com/vue/3.2.26
    dev: true

@ -5931,10 +5924,10 @@ packages:
      tslib: registry.nlark.com/tslib/2.3.1
    dev: true

-  registry.npmmirror.com/sass/1.45.2:
-    resolution: {integrity: sha512-cKfs+F9AMPAFlbbTXNsbGvg3y58nV0mXA3E94jqaySKcC8Kq3/8983zVKQ0TLMUrHw7hF9Tnd3Bz9z5Xgtrl9g==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/sass/download/sass-1.45.2.tgz}
+  registry.npmmirror.com/sass/1.46.0:
+    resolution: {integrity: sha512-Z4BYTgioAOlMmo4LU3Ky2txR8KR0GRPLXxO38kklaYxgo7qMTgy+mpNN4eKsrXDTFlwS5vdruvazG4cihxHRVQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/sass/download/sass-1.46.0.tgz}
    name: sass
-    version: 1.45.2
+    version: 1.46.0
    engines: {node: '>=8.9.0'}
    hasBin: true
    dependencies:
@ -6272,7 +6265,7 @@ packages:
      webpack:
        optional: true
    dependencies:
-      vite: registry.npmmirror.com/vite/2.7.10_sass@1.45.2
+      vite: registry.npmmirror.com/vite/2.7.10_sass@1.46.0
      webpack-virtual-modules: registry.nlark.com/webpack-virtual-modules/0.4.3
    dev: true

@ -6316,7 +6309,7 @@ packages:
      ejs: registry.npmmirror.com/ejs/3.1.6
      fs-extra: registry.nlark.com/fs-extra/10.0.0
      html-minifier-terser: registry.npmmirror.com/html-minifier-terser/6.1.0
-      vite: registry.npmmirror.com/vite/2.7.10_sass@1.45.2
+      vite: registry.npmmirror.com/vite/2.7.10_sass@1.46.0
    transitivePeerDependencies:
      - acorn
    dev: true
@ -6341,7 +6334,7 @@ packages:
      fast-glob: registry.nlark.com/fast-glob/3.2.7
      mockjs: registry.npmmirror.com/mockjs/1.1.0
      path-to-regexp: registry.nlark.com/path-to-regexp/6.2.0
-      vite: registry.npmmirror.com/vite/2.7.10_sass@1.45.2
+      vite: registry.npmmirror.com/vite/2.7.10_sass@1.46.0
    transitivePeerDependencies:
      - rollup
      - supports-color
@ -6358,13 +6351,13 @@ packages:
      '@windicss/plugin-utils': registry.npmmirror.com/@windicss/plugin-utils/1.6.1
      debug: registry.npmmirror.com/debug/4.3.3
      kolorist: registry.npmmirror.com/kolorist/1.5.1
-      vite: registry.npmmirror.com/vite/2.7.10_sass@1.45.2
+      vite: registry.npmmirror.com/vite/2.7.10_sass@1.46.0
      windicss: registry.npmmirror.com/windicss/3.4.2
    transitivePeerDependencies:
      - supports-color
    dev: true

-  registry.npmmirror.com/vite/2.7.10_sass@1.45.2:
+  registry.npmmirror.com/vite/2.7.10_sass@1.46.0:
    resolution: {integrity: sha512-KEY96ntXUid1/xJihJbgmLZx7QSC2D4Tui0FdS0Old5OokYzFclcofhtxtjDdGOk/fFpPbHv9yw88+rB93Tb8w==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vite/download/vite-2.7.10.tgz}
    id: registry.npmmirror.com/vite/2.7.10
    name: vite
@ -6387,7 +6380,7 @@ packages:
      postcss: registry.npmmirror.com/postcss/8.4.5
      resolve: registry.nlark.com/resolve/1.20.0
      rollup: registry.npmmirror.com/rollup/2.62.0
-      sass: registry.npmmirror.com/sass/1.45.2
+      sass: registry.npmmirror.com/sass/1.46.0
    optionalDependencies:
      fsevents: registry.npmmirror.com/fsevents/2.3.2
    dev: true
--- a/src/layouts/Layout/components/BasicLayout.vue
+++ b/src/layouts/Layout/components/BasicLayout.vue
@ -0,0 +1,92 @@
+<template>
+  <div class="flex flex-col h-full">
+    <header
+      :class="{ 'fixed-lt': topFixed }"
+      :style="{ height: headerHeight + 'px', paddingLeft: headerPaddingLeft }"
+      class="z-1001 flex-shrink-0 w-full bg-white border-b border-gray-200 transition-all duration-300 ease-in-out"
+    >
+      <slot name="header">
+        <h3>Header</h3>
+      </slot>
+    </header>
+    <div
+      :class="{ fixed: topFixed }"
+      :style="{ top: headerHeight + 'px', height: tabHeight + 'px', paddingLeft: siderWidth }"
+      class="left-0 z-999 flex-shrink-0 w-full bg-white border-b border-gray-200 transition-all duration-300 ease-in-out"
+    >
+      <slot name="tab">
+        <div>Tab</div>
+      </slot>
+    </div>
+    <aside
+      :style="{ width: siderWidth, paddingTop: siderPaddingTop }"
+      :class="[isVertical ? 'z-1002' : 'z-1000']"
+      class="fixed-lt h-full transition-all duration-300 ease-in-out bg-white border-r border-gray-200"
+    >
+      <slot name="sider">
+        <n-space :vertical="true" align="center" class="pt-24px">
+          <n-button type="primary" @click="toggle">折叠</n-button>
+          <div>
+            <span class="pr-12px">固定头部和标签</span>
+            <n-switch v-model:value="fixed" />
+          </div>
+          <div>
+            <span class="pr-12px">vertical布局</span>
+            <n-switch v-model:value="isVertical" />
+          </div>
+        </n-space>
+      </slot>
+    </aside>
+    <main
+      class="flex-1 transition-all duration-300 ease-in-out"
+      :style="{ paddingLeft: siderWidth, paddingTop: mainPaddingTop }"
+    >
+      <slot></slot>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { NSpace, NButton, NSwitch } from 'naive-ui';
+import { useBoolean } from '@/hooks';
+
+interface Props {
+  /** 头部高度 */
+  headerHeight?: number;
+  /** 标签页高度 */
+  tabHeight?: number;
+  /** 固定头部和标签 */
+  fixdTop?: boolean;
+  /** 侧边栏高度 */
+  siderWidth?: number;
+  /** 侧边栏折叠状态的高度 */
+  siderCollapsedWidth?: number;
+  /** 侧边栏折叠状态 */
+  siderCollapse?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  headerHeight: 56,
+  tabHeight: 44,
+  fixdTop: true,
+  topZIndex: 1000,
+  siderWidth: 200,
+  siderZIndex: 1001,
+  siderCollapsedWidth: 64,
+  siderCollapse: false
+});
+
+const { bool: collapse, toggle } = useBoolean();
+
+const fixed = ref(true);
+const isVertical = ref(true);
+
+const topFixed = computed(() => fixed.value || !isVertical.value);
+
+const siderWidth = computed(() => `${collapse.value ? props.siderCollapsedWidth : props.siderWidth}px`);
+const headerPaddingLeft = computed(() => (isVertical.value ? siderWidth.value : '0px'));
+const siderPaddingTop = computed(() => (isVertical.value ? '0px' : `${props.headerHeight}px`));
+const mainPaddingTop = computed(() => `${fixed.value ? props.headerHeight + props.tabHeight : 0}px`);
+</script>
+<style scoped></style>
--- a/src/layouts/Layout/components/index.ts
+++ b/src/layouts/Layout/components/index.ts
@ -0,0 +1,3 @@
+import BasicLayout from './BasicLayout.vue';
+
+export { BasicLayout };
--- a/src/layouts/Layout/index.vue
+++ b/src/layouts/Layout/index.vue
@ -1,16 +1,11 @@
 <template>
-  <div class="h-full">
-    <router-view v-slot="{ Component }">
-      <transition name="fade-slide" mode="out-in" appear>
-        <component :is="Component" v-if="app.reloadFlag" />
-      </transition>
-    </router-view>
-  </div>
+  <basic-layout>
+    <global-content />
+  </basic-layout>
 </template>

 <script setup lang="ts">
-import { useAppStore } from '@/store';
-
-const app = useAppStore();
+import { GlobalContent } from '../common';
+import { BasicLayout } from './components';
 </script>
 <style scoped></style>
--- a/src/layouts/common/GlobalContent/index.vue
+++ b/src/layouts/common/GlobalContent/index.vue
@ -0,0 +1,14 @@
+<template>
+  <router-view v-slot="{ Component }">
+    <transition name="fade-slide" mode="out-in" appear>
+      <component :is="Component" v-if="app.reloadFlag" />
+    </transition>
+  </router-view>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from '@/store';
+
+const app = useAppStore();
+</script>
+<style scoped></style>
--- a/src/layouts/common/index.ts
+++ b/src/layouts/common/index.ts
@ -0,0 +1,3 @@
+import GlobalContent from './GlobalContent/index.vue';
+
+export { GlobalContent };
--- a/src/router/guard/index.ts
+++ b/src/router/guard/index.ts
@ -6,7 +6,7 @@ import { handlePagePermission } from './permission';
 * 路由守卫函数
 * @param router - 路由实例
 */
-export function createRouterGuide(router: Router) {
+export function createRouterGuard(router: Router) {
  router.beforeEach(async (to, from, next) => {
    // 开始 loadingBar
    window.$loadingBar?.start();
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -2,7 +2,7 @@ import type { App } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
 import { transformAuthRoutesToVueRoutes } from '@/utils';
 import { constantRoutes } from './routes';
-import { createRouterGuide } from './guard';
+import { createRouterGuard } from './guard';

 export const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
@ -12,7 +12,7 @@ export const router = createRouter({

 export async function setupRouter(app: App) {
  app.use(router);
-  createRouterGuide(router);
+  createRouterGuard(router);
  await router.isReady();
 }

--- a/src/styles/css/global.css
+++ b/src/styles/css/global.css
@ -1,4 +1,3 @@
-@import './scrollbar.css';
@import './transition.css';

 html, body, #app {
--- a/src/styles/css/scrollbar.css
+++ b/src/styles/css/scrollbar.css
@ -1,7 +1,7 @@
 /*---滚动条默认显示样式--*/
 ::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
-  border-radius: 8px;
+  border-radius: 4px;
 }
 /*---鼠标点击滚动条显示样式--*/
 ::-webkit-scrollbar-thumb:hover {
@ -10,9 +10,10 @@
 }
 /*---滚动条大小--*/
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 10px;
+  width: 5px;
+  height: 5px;
 }
+
 /*---滚动框背景样式--*/
 ::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0);
--- a/windi.config.ts
+++ b/windi.config.ts
@ -15,8 +15,8 @@ export default defineConfig({
    'i-flex-center': 'inline-flex justify-center items-center',
    'i-flex-x-center': 'inline-flex justify-center',
    'i-flex-y-center': 'inline-flex items-center',
-    'flex-col': 'flex flex-col',
-    'flex-col-stretch': 'flex-col items-stretch',
+    'b-flex-col': 'flex flex-col',
+    'flex-col-stretch': 'b-flex-col items-stretch',
    'i-flex-col': 'inline-flex flex-col',
    'i-flex-col-stretch': 'i-flex-col items-stretch',
    'flex-1-hidden': 'flex-1 overflow-hidden',
@ -65,7 +65,8 @@ export default defineConfig({
        'error-hover': 'var(--error-color-hover)',
        'error-pressed': 'var(--error-color-pressed)',
        'error-active': 'var(--error-color-active)'
-      }
+      },
+      transitionProperty: ['padding-left']
    }
  },
  variants: {},