refactor(style): remove tailwind css

nebv
1 parent 66b56169
Showing 52 changed files with 513 additions and 505 deletions
.env
README.md
package.json
postcss.config.js
src/components/Basic/src/BasicArrow.vue
src/components/Container/src/collapse/CollapseContainer.vue
src/components/ContextMenu/src/index.tsx
src/components/Icon/index.tsx
src/components/Loading/BasicLoading.vue
src/components/Loading/FullLoading.vue
src/design/global.less
src/design/helper/distance.less
src/design/helper/loop.less
src/design/index.less
src/design/main.postcss
src/design/mixins.less
src/layouts/Logo.vue
src/layouts/default/LayoutBreadcrumb.tsx
src/layouts/default/LayoutHeader.tsx
src/layouts/default/index.less
@@ -2,7 +2,7 @@
 VITE_PORT = 3100
 # spa-title
-VITE_GLOB_APP_TITLE = vben admin 2.0
+VITE_GLOB_APP_TITLE = Vben Admin 2.0
 # spa shortname
 VITE_GLOB_APP_SHORT_NAME = vue_vben_admin_2x
@@ -47,6 +47,8 @@
 [2.0 在线预览](https://vvbin.cn/next/)
+测试账号: vben/123456
+
 <p align="center">
     <img alt="VbenAdmin Logo" width="100%" src="./.github/res/imgs/preview1.png">
     <img alt="VbenAdmin Logo" width="100%" src="./.github/res/imgs/preview2.png">
@@ -82,7 +82,6 @@
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.1.0",
-    "tailwindcss": "^1.8.13",
     "tasksfile": "^5.1.1",
     "ts-node": "^9.0.0",
     "typescript": "^4.0.3",
 const path = require('path');
 module.exports = {
-  plugins: [require('tailwindcss'), require('autoprefixer'), require('postcss-import')],
+  plugins: [require('autoprefixer'), require('postcss-import')],
 };
@@ -37,7 +37,7 @@
 </script>
 <style lang="less" scoped>
   .base-arrow {
-    transform: rotate(-90deg) !important;
+    transform: rotate(-90deg);
     transition: all 0.3s ease 0.1s;
     transform-origin: center center;
@@ -50,9 +50,10 @@
     }
     &__active {
-      > span {
-        transform: rotate(90deg) !important;
-      }
+      transform: rotate(90deg);
+      // > span {
+      //   transform: rotate(90deg);
+      // }
     }
   }
 </style>
 <template>
-  <div class="collapse-container p-2 bg:white rounded-sm">
+  <div class="collapse-container p-2">
     <CollapseHeader v-bind="$props" :show="show" @expand="handleExpand" />
     <CollapseTransition :enable="canExpan">
       <Skeleton v-if="loading" />
@@ -92,7 +92,6 @@
 </script>
 <style lang="less">
   .collapse-container {
-    padding: 10px;
     background: #fff;
     border-radius: 8px;
     transition: all 0.3s ease-in-out;
@@ -73,7 +73,9 @@ export default defineComponent({
         return (
           <li class={`${prefixCls}__item ${disabled ? 'disabled' : ''}`} key={label}>
-            <a onClick={handleAction.bind(null, item)}>{renderContent(item)}</a>
+            <a onClick={handleAction.bind(null, item)} style="color:#333;">
+              {renderContent(item)}
+            </a>
           </li>
         );
       });
@@ -64,6 +64,7 @@ export default defineComponent({
       return {
         fontSize: `${fs}px`,
         color,
+        display: 'inline-flex',
       };
     });
 <template>
-  <section class="flex justify-center items-center flex-col">
+  <section class="basic-loading">
     <img
       src="/@/assets/images/loading.svg"
       alt=""
@@ -47,3 +47,11 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .basic-loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+</style>
 <template>
-  <section
-    class="full-loading flex justify-center bg-mask-light items-center h-full w-full"
-    :style="getStyle"
-  >
+  <section class="full-loading" :style="getStyle">
     <BasicLoading :tip="tip" :size="SizeEnum.DEFAULT" />
   </section>
 </template>
@@ -39,3 +36,13 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .full-loading {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.3);
+    justify-content: center;
+    align-items: center;
+  }
+</style>
+@import './helper/distance.less';
+// 生成样式
+.distance();
+
+.hidden {
+  display: none !important;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-start {
+  justify-content: start;
+}
+
+.justify-end {
+  justify-content: end;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: normal;
+  white-space: nowrap;
+}
+@import 'loop.less';
+// margin 步长
+@margin-size-base: 4;
+
+// 最大生成
+@margin-size-max: 10;
+
+// padding步长
+@padding-size-base: 4;
+
+// 最大生成
+@padding-size-max: 10;
+
+.distance() {
+  // 生成margin
+  .loop (m, margin, 1, @margin-size-base, @margin-size-max);
+  .loop (mt, margin-top, 1, @margin-size-base, @margin-size-max);
+  .loop (mr, margin-right, 1, @margin-size-base, @margin-size-max);
+  .loop (mb, margin-bottom, 1, @margin-size-base, @margin-size-max);
+  .loop (ml, margin-left, 1, @margin-size-base, @margin-size-max);
+  .loop (my, margin, 1, @margin-size-base, @margin-size-max, y);
+  .loop (mx, margin, 1, @margin-size-base, @margin-size-max, x);
+  .loop (mx-auto, margin, 1, @padding-size-base, @padding-size-max, autoX);
+  .loop (my-auto, margin, 1, @padding-size-base, @padding-size-max, autoY);
+  .loop (m-auto, margin, 1, @padding-size-base, @padding-size-max, auto);
+
+  // 生成padding
+  .loop (p, padding, 1, @padding-size-base, @padding-size-max);
+  .loop (pt, padding-top, 1, @padding-size-base, @padding-size-max);
+  .loop (pr, padding-right, 1, @padding-size-base, @padding-size-max);
+  .loop (pb, padding-bottom, 1, @padding-size-base, @padding-size-max);
+  .loop (pl, padding-left, 1, @padding-size-base, @padding-size-max);
+  .loop (py, padding, 1, @padding-size-base, @padding-size-max, y);
+  .loop (px, padding, 1, @padding-size-base, @padding-size-max, x);
+  .loop (px-auto, padding, 1, @padding-size-base, @padding-size-max, autoX);
+  .loop (py-auto, padding, 1, @padding-size-base, @padding-size-max, autoY);
+  .loop (p-auto, padding, 1, @padding-size-base, @padding-size-max, auto);
+}
+.loop (@style-name, @tag-name, @i,@base-size, @max:10,@xy:none) when (@i <= @max) {
+  @next: @i+1;
+  .fn() when (@xy =none) {
+    @size: @base-size * @i;
+
+    .@{style-name}-@{i} {
+      @{tag-name}: ~'@{size}px ';
+    }
+    .loop(@style-name, @tag-name, @next, @base-size, @max, @xy);
+  }
+
+  .fn() when (@xy =x) {
+    @size: @base-size * @i;
+
+    @tnl: ~'@{tag-name}-left';
+    @tnr: ~'@{tag-name}-right';
+
+    .@{style-name}-@{i} {
+      @{tnl}: ~'@{size}px';
+      @{tnr}: ~'@{size}px';
+    }
+    .loop(@style-name, @tag-name, @next, @base-size, @max, @xy);
+  }
+  .fn() when (@xy =y) {
+    @size: @base-size * @i;
+
+    @tnt: ~'@{tag-name}-top';
+    @tnb: ~'@{tag-name}-bottom';
+
+    .@{style-name}-@{i} {
+      @{tnt}: ~'@{size}px';
+      @{tnb}: ~'@{size}px';
+    }
+    .loop(@style-name, @tag-name, @next, @base-size, @max, @xy);
+  }
+  .fn() when (@xy =auto) {
+    @tnt: ~'@{tag-name}-top';
+    @tnb: ~'@{tag-name}-bottom';
+    @tnl: ~'@{tag-name}-left';
+    @tnr: ~'@{tag-name}-right';
+    .@{style-name} {
+      @{tnl}: ~'auto';
+      @{tnr}: ~'auto';
+      @{tnt}: ~'auto';
+      @{tnb}: ~'auto';
+    }
+  }
+
+  .fn() when (@xy =autoX) {
+    @tnl: ~'@{tag-name}-left';
+    @tnr: ~'@{tag-name}-right';
+    .@{style-name} {
+      @{tnl}: ~'auto';
+      @{tnr}: ~'auto';
+    }
+  }
+
+  .fn() when (@xy =autoY) {
+    @tnt: ~'@{tag-name}-top';
+    @tnb: ~'@{tag-name}-bottom';
+    .@{style-name} {
+      @{tnt}: ~'auto';
+      @{tnb}: ~'auto';
+    }
+  }
+  .fn();
+}
@@ -3,6 +3,7 @@
 @import 'public.less';
 @import 'mixins.less';
 @import 'ant/index.less';
+@import './global.less';
 *,
 *::before,
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
@@ -42,13 +42,6 @@
   user-select: none;
 }
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-wrap: normal;
-  white-space: nowrap;
-}
-
 /* 适用于webkit内核和移动端 */
 .ellipsis-multiple(@num: 1) {
   display: -webkit-box;
@@ -56,3 +49,54 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: @num;
 }
+
+.respond-to (small, @content) {
+  @media only screen and (min-width: @screen-sm-min) {
+    @content();
+  }
+}
+.respond-to (medium, @content) {
+  @media only screen and (min-width: @screen-md-min) {
+    @content();
+  }
+}
+.respond-to (large, @content) {
+  @media only screen and (min-width: @screen-lg-min) {
+    @content();
+  }
+}
+.respond-to (xlarge, @content) {
+  @media only screen and (min-width: @screen-xl-min) {
+    @content();
+  }
+}
+.respond-to (xsmall-only, @content) {
+  @media only screen and (max-width: @screen-xs-max) {
+    @content();
+  }
+}
+.respond-to (small-only, @content) {
+  @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+    @content();
+  }
+}
+.respond-to (medium-only, @content) {
+  @media only screen and (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+    @content();
+  }
+}
+.respond-to (large-only, @content) {
+  @media only screen and (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
+    @content();
+  }
+}
+.respond-to (xsmall-and-small, @content) {
+  @media only screen and (max-width: @screen-sm-max) {
+    @content();
+  }
+}
+.respond-to (small-and-medium, @content) {
+  @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-md-max) {
+    @content();
+  }
+}
 <template>
-  <div class="flex justify-items-center items-center cursor-pointer" @click="handleGoHome">
+  <div class="app-logo" @click="handleGoHome">
     <img :src="logo" />
-    <div v-if="show" class="logo-title ml-2 text-xl hidden md:block font-logo ellipsis">{{
-      globSetting.title
-    }}</div>
+    <div v-if="show" class="logo-title ml-2 ellipsis">{{ globSetting.title }}</div>
   </div>
 </template>
 <script lang="ts">
@@ -52,3 +50,22 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  @import (reference) '../design/index.less';
+
+  .app-logo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    .logo-title {
+      display: none;
+      font-family: Georgia, serif;
+      font-size: 18px;
+      .respond-to(medium,{
+       display: block;
+     });
+    }
+  }
+</style>
@@ -65,7 +65,7 @@ export default defineComponent({
     return () => (
       <>
-        <Breadcrumb class="layout-breadcrumb flex-grow">
+        <Breadcrumb class="layout-breadcrumb ">
           {() => (
             <>
               <TransitionGroup name="breadcrumb">
@@ -55,23 +55,17 @@ export default defineComponent({
       const isSidebarType = menuType === MenuTypeEnum.SIDEBAR;
       return (
-        <Layout.Header
-          class={[
-            'layout-header',
-            'bg-white flex p-0 px-4 justify-items-center',
-            unref(headerClass),
-          ]}
-        >
+        <Layout.Header class={['layout-header', 'flex p-0 px-4 ', unref(headerClass)]}>
           {() => (
             <>
-              <div class="flex-grow flex justify-center items-center">
+              <div class="layout-header__content ">
                 {showLogo && !isSidebarType && <Logo class={`layout-header__logo`} />}
                 {mode !== MenuModeEnum.HORIZONTAL && showBreadCrumb && !splitMenu && (
                   <LayoutBreadcrumb />
                 )}
                 {(mode === MenuModeEnum.HORIZONTAL || splitMenu) && (
-                  <div class={[`layout-header__menu flex-grow `, `justify-${topMenuAlign}`]}>
+                  <div class={[`layout-header__menu `, `justify-${topMenuAlign}`]}>
                     <LayoutMenu
                       theme={headerTheme}
                       splitType={splitMenu ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE}
@@ -191,9 +191,17 @@
   height: @header-height;
   padding: 0 20px 0 0;
   color: @white;
+  background: @white;
   align-items: center;
   justify-content: space-between;
+  &__content {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   &__header--light {
     background: @white;
     border-bottom: 1px solid @header-light-bottom-border-color;
@@ -334,6 +342,7 @@
     margin-left: 20px;
     overflow: hidden;
     align-items: center;
+    flex-grow: 1;
   }
   &__user-dropdown {
@@ -398,4 +407,5 @@
 .layout-breadcrumb {
   padding: 0 16px;
+  flex-grow: 1;
 }
 <template>
-  <div
-    @click="openDrawer"
-    class="setting-button bg-primary flex justify-center items-center text-white p-4 absolute z-10 cursor-pointer"
-  >
+  <div @click="openDrawer" class="setting-button">
     <SettingOutlined :spin="true" />
     <SettingDrawer @register="register" />
   </div>
@@ -26,3 +23,18 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  @import (reference) '../../../design/index.less';
+
+  .setting-button {
+    position: absolute;
+    z-index: 10;
+    display: flex;
+    padding: 10px;
+    color: @white;
+    cursor: pointer;
+    background: @primary-color;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
@@ -6,12 +6,13 @@ import { appStore } from &#39;/@/store/modules/app&#39;;
 import { AppRouteRecordRaw } from '/@/router/types';
 import { useRouter } from 'vue-router';
 import router from '/@/router';
+import { unique } from '/@/utils';
 export function useFrameKeepAlive() {
   const { currentRoute } = useRouter();
   function getAllFramePages(routes: AppRouteRecordRaw[]): AppRouteRecordRaw[] {
-    const res: AppRouteRecordRaw[] = [];
+    let res: AppRouteRecordRaw[] = [];
     for (const route of routes) {
       const { meta: { frameSrc } = {}, children } = route;
       if (frameSrc) {
@@ -21,6 +22,7 @@ export function useFrameKeepAlive() {
         res.push(...getAllFramePages(children));
       }
     }
+    res = unique(res, 'name');
     return res;
   }
@@ -30,6 +32,9 @@ export function useFrameKeepAlive() {
   const getFramePages = computed(() => {
     const ret =
       getAllFramePages((toRaw(router.getRoutes()) as unknown) as AppRouteRecordRaw[]) || [];
+    console.log('======================');
+    console.log(ret);
+    console.log('======================');
     return ret;
   });
@@ -10,7 +10,6 @@ import { isDevMode, isProdMode, isUseMock } from &#39;/@/utils/env&#39;;
 import { setupProdMockServer } from '../mock/_createProductionServer';
 import '/@/design/index.less';
-import '/@/design/main.postcss';
 const app = createApp(App);
@@ -59,7 +59,7 @@ const menu: MenuModule = {
           },
           {
             path: '/mergeHeader',
-            name: '合并表头',
+            name: '合并单元格',
           },
           {
             path: '/expandTable',
@@ -183,7 +183,7 @@ export default {
           name: 'MergeHeaderDemo',
           component: () => import('/@/views/demo/table/MergeHeader.vue'),
           meta: {
-            title: '合并表头',
+            title: '合并单元格',
           },
         },
         {
@@ -8,7 +8,7 @@ export default {
     path: '/permission',
     name: 'Permission',
     component: PAGE_LAYOUT_COMPONENT,
-    redirect: '/permission/front',
+    redirect: '/permission/front/page',
     meta: {
       icon: 'carbon:user-role',
       title: '权限管理',
-// import { FullLoading } from '/@/components/Loading/index';
-// import { LoadTimeOut } from '/@/views/sys/exception/';
-
-// /**
-//  * @description:  Load page displayed by page switching
-//  */
-// export const LOADING_PAGE = FullLoading;
-
-// /**
-//  * @description:  Switch to switch timeout page
-//  */
-// export const TIMEOUT_PAGE = LoadTimeOut;
-
-// /**
-//  * @description: If there is no response for the specified time, the loading page will be displayed
-//  * 400 m
-//  */
-// export const DELAY = 400;
-
-// /**
-//  * @description: Switch page if there is no response for more than the specified time, the timeout page will be displayed
-//  * 10秒
-//  */
-// export const TIMEOUT = 60 * 1000;
 <template>
-  <div class="h-full w-full flex justify-center items-center">
+  <div class="welcome">
     <House />
   </div>
 </template>
@@ -14,3 +14,12 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .welcome {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
 <template>
-  <div class="px-64">
+  <div class="px-10">
     <Alert message="点内外部触发事件" show-icon class="mt-4"></Alert>
     <ClickOutSide @clickOutside="handleClickOutside" class="flex justify-center mt-10">
-      <div
-        @click="innerClick"
-        class="bg-primary w-full h-64 flex justify-center items-center text-2xl text-white rounded-lg shadow-lg"
-      >
+      <div @click="innerClick" class="demo-box">
         {{ text }}
       </div>
     </ClickOutSide>
@@ -30,3 +27,17 @@
     },
   });
 </script>
+
+<style lang="less" scoped>
+  .demo-box {
+    display: flex;
+    width: 100%;
+    height: 300px;
+    font-size: 24px;
+    color: #fff;
+    background: #408ede;
+    border-radius: 10px;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
@@ -8,11 +8,11 @@
       <a-button @click="scrollTo(0)" class="mr-2">滚动到顶部</a-button>
       <a-button @click="scrollBottom()" class="mr-2">滚动到底部</a-button>
     </div>
-    <div class="w-1/2 h-64 bg-white">
+    <div class="scroll-wrap">
       <ScrollContainer class="mt-4" ref="scrollRef">
         <ul class="p-3">
           <template v-for="index in 100" :key="index">
-            <li class="leading-8 px-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
+            <li class="p-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
           </template>
         </ul>
       </ScrollContainer>
@@ -50,3 +50,10 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .scroll-wrap {
+    width: 50%;
+    height: 300px;
+    background: #fff;
+  }
+</style>
@@ -9,9 +9,9 @@
       </VirtualScroll>
     </div>
-    <Divider>即使不可见，也预先加载30条数据，防止空白</Divider>
+    <Divider>即使不可见，也预先加载50条数据，防止空白</Divider>
     <div class="virtual-scroll-demo-wrap">
-      <VirtualScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="30">
+      <VirtualScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="50">
         <template v-slot="{ item }">
           <div class="virtual-scroll-demo__item">{{ item.title }}</div>
         </template>
 <template>
   <div class="p-4">
     <Alert message="抽取el-scrollbar，并对其进行扩展,滚动条美化,适用于各个浏览器" type="info" />
-    <div class="w-1/2 h-64 bg-white">
+    <div class="scroll-wrap">
       <ScrollContainer class="mt-4">
         <ul class="p-3">
           <template v-for="index in 100" :key="index">
-            <li class="leading-8 px-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
+            <li class="p-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
           </template>
         </ul>
       </ScrollContainer>
@@ -24,3 +24,10 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .scroll-wrap {
+    width: 50%;
+    height: 300px;
+    background: #fff;
+  }
+</style>
 <template>
   <div class="p-4 flex justify-center">
-    <div class="w-1/2 bg-white p-10 rounded-md">
+    <div class="demo-wrap p-10">
       <StrengthMeter placeholder="默认" />
       <StrengthMeter placeholder="禁用" disabled />
       <br />
@@ -21,3 +21,10 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .demo-wrap {
+    width: 50%;
+    background: #fff;
+    border-radius: 10px;
+  }
+</style>
@@ -21,3 +21,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .bg-gray-700 {
+    background: #4a5568;
+  }
+</style>
@@ -88,3 +88,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .bg-gray-700 {
+    background: #4a5568;
+  }
+</style>
 <template>
   <div class="p-4">
-    <CollapseContainer
-      class="px-20 bg-white w-full h-32 rounded-md"
-      title="在下面输入框输入文本,切换后回来内容会保存"
-    >
+    <CollapseContainer title="在下面输入框输入文本,切换后回来内容会保存">
       <a-input placeholder="请输入" />
     </CollapseContainer>
-    <CollapseContainer class="px-20 mt-10 bg-white w-full h-32 rounded-md" title="标签页操作">
+    <CollapseContainer class="mt-4 px-4" title="标签页操作">
       <a-button class="mr-2" @click="closeAll">关闭所有</a-button>
       <a-button class="mr-2" @click="closeLeft">关闭左侧</a-button>
       <a-button class="mr-2" @click="closeRight">关闭右侧</a-button>
 <template>
-  <div class="p-10 m-4 rounded-md bg-white">
+  <div class="p-4 m-4 demo">
     <Alert message="刷新后会还原" show-icon />
     <CurrentPermissionMode />
@@ -83,3 +83,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .demo {
+    background: #fff;
+  }
+</style>
 <template>
-  <div class="p-10 m-4 rounded-md bg-white">
+  <div class="p-4 m-4 demo">
     <Alert
       message="目前mock了两组数据， id为1 和 2 具体返回的菜单可以在mock/sys/menu.ts内查看"
       show-icon
@@ -35,3 +35,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .demo {
+    background: #fff;
+  }
+</style>
 <template>
-  <div class="m-10 bg-primary text-2xl h-64 rounded-lg flex justify-center items-center text-white">
-    Super 角色可见
-  </div>
+  <div class="m-10 auth-page"> Super 角色可见 </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
   export default defineComponent({});
 </script>
+<style lang="less" scoped>
+  .auth-page {
+    display: flex;
+    height: 300px;
+    font-size: 24px;
+    color: #fff;
+    background: #409efe;
+    border-radius: 12px;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
 <template>
-  <div class="m-10 bg-primary text-2xl h-64 rounded-lg flex justify-center items-center text-white">
-    Test 角色可见
-  </div>
+  <div class="m-10 auth-page"> Test 角色可见 </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
   export default defineComponent({});
 </script>
+<style lang="less" scoped>
+  .auth-page {
+    display: flex;
+    height: 300px;
+    font-size: 24px;
+    color: #fff;
+    background: #409efe;
+    border-radius: 12px;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
 <template>
-  <div class="p-10 m-4 rounded-md bg-white">
+  <div class="demo p-4 m-4">
     <Alert
       message="由于刷新的时候会请求用户信息接口，会根据接口重置角色信息，所以刷新后界面会恢复原样，如果不需要，可以注释 src/layout/default/index内的获取用户信息接口"
       show-icon
@@ -82,3 +82,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .demo {
+    background: #fff;
+  }
+</style>
 <template>
-  <div class="p-10 m-4 rounded-md bg-white">
+  <div class="p-4 m-4 demo">
     <Alert
       message="由于刷新的时候会请求用户信息接口，会根据接口重置角色信息，所以刷新后界面会恢复原样，如果不需要，可以注释 src/layout/default/index内的获取用户信息接口"
       show-icon
@@ -46,3 +46,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .demo {
+    background: #fff;
+  }
+</style>
@@ -17,7 +17,7 @@
       <a-button @click="deleteNodeByKey('2-2')" class="mr-2">删除parent3节点</a-button>
       <a-button @click="updateNodeByKey('1-1')" class="mr-2">更新parent2节点</a-button>
     </div>
-    <CollapseContainer title="函数操作" class="w-1/3 mr-4" :canExpan="false">
+    <CollapseContainer title="函数操作" class="mr-4" :canExpan="false" :style="{ width: '33%' }">
       <BasicTree :treeData="treeData" ref="treeRef" :checkable="true" />
     </CollapseContainer>
   </div>
 <template>
   <div class="flex p-4">
-    <CollapseContainer title="右侧操作按钮" class="w-1/3 mr-4">
+    <CollapseContainer title="右侧操作按钮" class="mr-4" :style="{ width: '33%' }">
       <BasicTree :treeData="treeData" :actionList="actionList" />
     </CollapseContainer>
-    <CollapseContainer title="右键菜单" class="w-1/3 mr-4">
+    <CollapseContainer title="右键菜单" class="mr-4" :style="{ width: '33%' }">
       <BasicTree :treeData="treeData" :beforeRightClick="getRightMenuList" />
     </CollapseContainer>
   </div>
 <template>
   <div class="flex p-4">
-    <CollapseContainer title="基础示例" class="w-1/3 mr-4">
+    <CollapseContainer title="基础示例" :style="{ width: '33%' }" class="mr-4">
       <BasicTree :treeData="treeData" />
     </CollapseContainer>
-    <CollapseContainer title="可勾选" class="w-1/3 mr-4">
+    <CollapseContainer title="可勾选" class="mr-4" :style="{ width: '33%' }">
       <BasicTree :treeData="treeData" :checkable="true" />
     </CollapseContainer>
-    <CollapseContainer title="默认展开/勾选示例" class="w-1/3">
+    <CollapseContainer title="默认展开/勾选示例" :style="{ width: '33%' }">
       <BasicTree
         :treeData="treeData"
         :checkable="true"
-<template>
-  <h1>{{ msg }}</h1>
-  <a-button @click="test">change </a-button>
-  <div class="sw">
-    <Scrollbar ref="a">
-      <div class="ss">13123</div>
-    </Scrollbar>
-  </div>
-
-  <a-button @click="test1" type="primary">change</a-button>
-  <ScrollYTransition>
-    <div class="box" v-show="show"> 1 </div>
-  </ScrollYTransition>
-
-  <!-- <BasicModal /> -->
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { Scrollbar } from '/@/components/Scrollbar/index';
-  import { ScrollContainer } from '/@/components/Container/index';
-  import { defHttp } from '/@/utils/http/axios';
-  import { useThemeMode } from '/@/useApp';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import {
-    CollapseTransition,
-    ExpandXTransition,
-    ScaleTransition,
-    ScaleRotateTransition,
-    ScrollYTransition,
-  } from '/@/components/Transition';
-  import { ThemeModeEnum } from '../enums/appEnum';
-  // import { BasicModal } from '/@/components/modal';
-  export default defineComponent({
-    name: 'Home',
-    components: {
-      Scrollbar,
-      CollapseTransition,
-      ExpandXTransition,
-      ScaleTransition,
-      ScaleRotateTransition,
-      ScrollYTransition,
-      ScrollContainer,
-      // BasicModal
-    },
-    setup() {
-      const { createMessage } = useMessage();
-      createMessage.success({
-        content: '123',
-        duration: 999999,
-      });
-      // createMessage.error('123');
-      // createMessage.info('123');
-      // createMessage.warning('123');
-      // createConfirm({
-      //   iconType: 'success',
-      //   title: '123',
-      //   content: '123',
-      // });
-      const { runChangeThemeMode } = useThemeMode(ThemeModeEnum.DARK);
-      let msg = ref('hello Home');
-      const show = ref(true);
-      function test() {
-        msg.value = 'hello Home1';
-      }
-      defHttp.request({
-        method: 'post',
-        url: '/login',
-        params: {
-          username: 'vben',
-          password: '123456',
-        },
-      });
-
-      const a = ref(null);
-      function test1() {
-        runChangeThemeMode();
-        // show.value = !show.value;
-        // a.value.scrollTo(200);
-      }
-      return {
-        a,
-        msg,
-        test,
-        show,
-        test1,
-      };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .sw {
-    width: 300px;
-    height: 300px;
-    border: 1px solid red;
-
-    .scrollbar {
-      height: 100%;
-    }
-
-    .ss {
-      height: 500px;
-    }
-  }
-
-  .box {
-    width: 200px;
-    height: 200px;
-    background: #000;
-  }
-</style>
@@ -15,6 +15,7 @@ import { useRoute } from &#39;vue-router&#39;;
 import { useGo, useRedo } from '/@/hooks/web/usePage';
 import { PageEnum } from '/@/enums/pageEnum';
+import './exception.less';
 interface MapValue {
   title: string;
   subTitle: string;
@@ -105,7 +106,7 @@ export default defineComponent({
       const { title, subTitle, btnText, icon, handler } = unref(getMapValue) || {};
       return (
         <Result
-          class="flex items-center flex-col"
+          class="exception "
           title={props.title || title}
           sub-title={props.subTitle || subTitle}
         >
+.exception {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
 <template>
-  <div class="login h-screen relative">
-    <div class="login-mask h-full hidden lg:block" />
-    <div
-      class="h-full absolute right-0 top-0 w-full lg:w-2/5 xl:w-1/3 flex justify-center items-center"
-    >
-      <div class="login-form bg-white w-full rounded-sm border-solid bg-clip-padding mx-6 xl:mx-14">
-        <div class="w-full h-full border border-gray-600 px-2 py-10 rounded-sm">
-          <header class="flex justify-center items-center">
-            <img src="/@/assets/images/logo.png" class="w-12 mr-4 inline-block" />
-            <h1 class="text-2xl text-center text-primary tracking-wide">Vben Admin 2.0</h1>
+  <div class="login">
+    <div class="login-mask" />
+    <div class="login-form-wrap">
+      <div class="login-form mx-6">
+        <div class="login-form__content px-2 py-10">
+          <header>
+            <img src="/@/assets/images/logo.png" class="mr-4" />
+            <h1>{{ title }}</h1>
           </header>
-          <a-form class="w-4/5 mx-auto mt-10" :model="formData" :rules="formRules" ref="formRef">
+          <a-form class="mx-auto mt-10" :model="formData" :rules="formRules" ref="formRef">
             <a-form-item name="account">
               <a-input size="large" v-model:value="formData.account" placeholder="vben" />
             </a-form-item>
@@ -50,9 +48,11 @@
   import { userStore } from '/@/store/modules/user';
   import { appStore } from '/@/store/modules/app';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { useSetting } from '/@/hooks/core/useSetting';
   export default defineComponent({
     components: { BasicDragVerify },
     setup() {
+      const { globSetting } = useSetting();
       const { notification } = useMessage();
       const formRef = ref<any>(null);
       const verifyRef = ref<RefInstanceType<DragVerifyActionType>>(null);
@@ -115,23 +115,79 @@
         formRules,
         login: handleLogin,
         openLoginVerify: openLoginVerifyRef,
+        title: globSetting && globSetting.title,
       };
     },
   });
 </script>
 <style lang="less" scoped>
+  @import (reference) '../../../design/index.less';
+
   .login {
+    position: relative;
+    height: 100vh;
     background: url(../../../assets/images/login/login-bg.png) no-repeat;
     background-size: 100% 100%;
     &-mask {
+      display: none;
+      height: 100%;
       background: url(../../../assets/images/login/login-in.png) no-repeat;
       background-size: 100% 100%;
+
+      .respond-to(large, { display: block;});
     }
     &-form {
-      border-color: rgba(255, 255, 255, 0.5);
+      width: 100%;
+      background: @white;
+      border: 10px solid rgba(255, 255, 255, 0.5);
       border-width: 10px;
+      border-radius: 4px;
+      background-clip: padding-box;
+      .respond-to(xlarge, { margin: 0 56px});
+
+      &-wrap {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+        .respond-to(large, { width: 40%;});
+        .respond-to(xlarge, { width: 33.3%;});
+      }
+
+      &__content {
+        width: 100%;
+        height: 100%;
+        border: 1px solid #999;
+        border-radius: 2px;
+
+        header {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          img {
+            display: inline-block;
+            width: 48px;
+          }
+
+          h1 {
+            margin-bottom: 0;
+            font-size: 24px;
+            color: @primary-color;
+            text-align: center;
+          }
+        }
+
+        form {
+          width: 80%;
+        }
+      }
     }
   }
 </style>
-// #4c5eb8
-const { colors, inset } = require('tailwindcss/defaultTheme');
-
-const themeColors = {
-  mask: {
-    light: 'rgba(255,255,255,0.3)',
-  },
-  primary: '#018ffb',
-  success: '#55d187',
-  warning: '#ffd164',
-  danger: '#ed6f6f',
-};
-
-module.exports = {
-  purge: {
-    enabled: process.env.NODE_ENV === 'production',
-    content: [
-      './index.html',
-      './src/**/*.vue',
-      './src/**/*.js',
-      './src/**/*.jsx',
-      './src/**/*.ts',
-      './src/**/*.tsx',
-    ],
-  },
-  theme: {
-    colors: {
-      ...colors,
-      ...themeColors,
-    },
-    inset: {
-      ...inset,
-      '1/2': '50%',
-    },
-    screens: {
-      xs: '480px',
-      sm: '576px',
-      md: '768px',
-      lg: '992px',
-      xl: '1200px',
-      xxl: '1600px',
-    },
-    fontSize: {
-      xs: '.75rem', // 12px
-      sm: '.875rem', // 14px
-      base: '1rem', // 16px
-      lg: '1.125rem', // 18px
-      xl: '1.25rem', // 20px
-      '2xl': '1.5rem', // 24px
-      '3xl': '1.875rem', // 30px
-      '4xl': '2.25rem', // 36px
-      '5xl': '3rem', // 48px
-      '6xl': '4rem', // 64px
-      logo: '9rem', // 134px
-    },
-    fontWeight: {
-      light: 300,
-      normal: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
-      extrabold: 800,
-      black: 900,
-    },
-    fontFamily: {
-      logo: [' Georgia', 'serif'],
-    },
-  },
-  future: {
-    // 2.0 remove col-gap-{n}
-    removeDeprecatedGapUtilities: true,
-    purgeLayersByDefault: true,
-  },
-};
@@ -23,9 +23,6 @@
     "paths": {
       "/@/*": [
         "src/*"
-      ],
-      "/@design/": [
-        "src/design/index.less"
       ]
     }
   },
@@ -367,14 +367,6 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
-"@fullhuman/postcss-purgecss@^2.1.2":
-  version "2.3.0"
-  resolved "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz#50a954757ec78696615d3e118e3fee2d9291882e"
-  integrity sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==
-  dependencies:
-    postcss "7.0.32"
-    purgecss "^2.3.0"
-
 "@iconify/iconify@2.0.0-rc.1", "@iconify/iconify@>=2.0.0-rc.1", "@iconify/iconify@^2.0.0-rc.1":
   version "2.0.0-rc.1"
   resolved "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.0.0-rc.1.tgz#a8bae29d71016d5af98c69f56a73c4a040217b3a"
@@ -976,21 +968,7 @@ acorn-jsx@^5.2.0:
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
   integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
-acorn-node@^1.6.1:
-  version "1.8.2"
-  resolved "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
-  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
-  dependencies:
-    acorn "^7.0.0"
-    acorn-walk "^7.0.0"
-    xtend "^4.0.2"
-
-acorn-walk@^7.0.0:
-  version "7.2.0"
-  resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
-  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
-
-acorn@^7.0.0, acorn@^7.1.1, acorn@^7.4.0:
+acorn@^7.1.1, acorn@^7.4.0:
   version "7.4.1"
   resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
@@ -1211,7 +1189,7 @@ atob@^2.1.2:
   resolved "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
-autoprefixer@^9.4.5, autoprefixer@^9.8.6:
+autoprefixer@^9.8.6:
   version "9.8.6"
   resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
   integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==
@@ -1376,7 +1354,7 @@ builtin-modules@^3.1.0:
   resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484"
   integrity sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==
-bytes@3.1.0, bytes@^3.0.0:
+bytes@3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
@@ -1433,11 +1411,6 @@ callsites@^3.0.0:
   resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
-camelcase-css@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
-  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
-
 camelcase-keys@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
@@ -1507,7 +1480,7 @@ chalk@2.4.2, chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
-chalk@4.1.0, "chalk@^3.0.0 || ^4.0.0", chalk@^4.0.0, chalk@^4.1.0:
+chalk@4.1.0, chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
   integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
@@ -1685,7 +1658,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
-color-convert@^1.9.0, color-convert@^1.9.1:
+color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -1704,27 +1677,11 @@ color-name@1.1.3:
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-color-name@^1.0.0, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-color-string@^1.5.4:
-  version "1.5.4"
-  resolved "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz#dd51cd25cfee953d138fe4002372cc3d0e504cb6"
-  integrity sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
-color@^3.1.2:
-  version "3.1.3"
-  resolved "https://registry.npmjs.org/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
-  integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==
-  dependencies:
-    color-convert "^1.9.1"
-    color-string "^1.5.4"
-
 colorette@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
@@ -1740,11 +1697,6 @@ commander@^2.20.0:
   resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-commander@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
-  integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
-
 commitizen@^4.0.3, commitizen@^4.2.1:
   version "4.2.1"
   resolved "https://registry.npmjs.org/commitizen/-/commitizen-4.2.1.tgz#3b098b16c6b1a37f0d129018dff6751b20cd3103"
@@ -2069,11 +2021,6 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
-css-unit-converter@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
-  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -2222,11 +2169,6 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
-defined@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
-  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
-
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -2257,15 +2199,6 @@ detect-indent@6.0.0:
   resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
   integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
-detective@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
-  integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
-  dependencies:
-    acorn-node "^1.6.1"
-    defined "^1.0.0"
-    minimist "^1.1.1"
-
 diff@^4.0.1:
   version "4.0.2"
   resolved "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
@@ -2910,7 +2843,7 @@ fresh@~0.5.2:
   resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
-fs-extra@8.1.0, fs-extra@^8.0.0:
+fs-extra@8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
   integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
@@ -3558,11 +3491,6 @@ is-arrayish@^0.2.1:
   resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
-is-arrayish@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
-  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
-
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -4532,7 +4460,7 @@ minimist-options@^3.0.1:
     arrify "^1.0.1"
     is-plain-obj "^1.1.0"
-minimist@1.2.5, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
+minimist@1.2.5, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
@@ -4645,7 +4573,7 @@ neo-async@^2.6.0:
   resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
-node-emoji@^1.10.0, node-emoji@^1.8.1:
+node-emoji@^1.10.0:
   version "1.10.0"
   resolved "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
   integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==
@@ -4687,11 +4615,6 @@ normalize-selector@^0.2.0:
   resolved "https://registry.npmjs.org/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03"
   integrity sha1-0LFF62kRicY6eNIB3E/bEpPvDAM=
-normalize.css@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
-  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
-
 npm-run-path@^4.0.0:
   version "4.0.1"
   resolved "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
@@ -4714,7 +4637,7 @@ number-is-nan@^1.0.0:
   resolved "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
-object-assign@4.x, object-assign@^4.0.1, object-assign@^4.1.1:
+object-assign@4.x, object-assign@^4.0.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@@ -4728,11 +4651,6 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
-object-hash@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/object-hash/-/object-hash-2.0.3.tgz#d12db044e03cd2ca3d77c0570d87225b02e1e6ea"
-  integrity sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg==
-
 object-visit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
@@ -5109,16 +5027,6 @@ postcss-discard-comments@^4.0.2:
   dependencies:
     postcss "^7.0.0"
-postcss-functions@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e"
-  integrity sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=
-  dependencies:
-    glob "^7.1.2"
-    object-assign "^4.1.1"
-    postcss "^6.0.9"
-    postcss-value-parser "^3.3.0"
-
 postcss-html@^0.36.0:
   version "0.36.0"
   resolved "https://registry.npmjs.org/postcss-html/-/postcss-html-0.36.0.tgz#b40913f94eaacc2453fd30a1327ad6ee1f88b204"
@@ -5136,14 +5044,6 @@ postcss-import@^12.0.1:
     read-cache "^1.0.0"
     resolve "^1.1.7"
-postcss-js@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz#a96f0f23ff3d08cec7dc5b11bf11c5f8077cdab9"
-  integrity sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==
-  dependencies:
-    camelcase-css "^2.0.1"
-    postcss "^7.0.18"
-
 postcss-less@^3.1.4:
   version "3.1.4"
   resolved "https://registry.npmjs.org/postcss-less/-/postcss-less-3.1.4.tgz#369f58642b5928ef898ffbc1a6e93c958304c5ad"
@@ -5212,14 +5112,6 @@ postcss-modules@^3.2.2:
     postcss-modules-values "^3.0.0"
     string-hash "^1.1.1"
-postcss-nested@^4.1.1:
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz#c6f255b0a720549776d220d00c4b70cd244136f6"
-  integrity sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==
-  dependencies:
-    postcss "^7.0.32"
-    postcss-selector-parser "^6.0.2"
-
 postcss-resolve-nested-selector@^0.1.1:
   version "0.1.1"
   resolved "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
@@ -5270,7 +5162,7 @@ postcss-syntax@^0.36.2:
   resolved "https://registry.npmjs.org/postcss-syntax/-/postcss-syntax-0.36.2.tgz#f08578c7d95834574e5593a82dfbfa8afae3b51c"
   integrity sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==
-postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
+postcss-value-parser@^3.2.3:
   version "3.3.1"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
@@ -5280,25 +5172,7 @@ postcss-value-parser@^4.1.0:
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
-postcss@7.0.32:
-  version "7.0.32"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
-  integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
-  dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
-
-postcss@^6.0.9:
-  version "6.0.23"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
-  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
-  dependencies:
-    chalk "^2.4.1"
-    source-map "^0.6.1"
-    supports-color "^5.4.0"
-
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.18, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.28, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.28, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.35"
   resolved "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
   integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
@@ -5324,11 +5198,6 @@ prettier@^2.1.2:
   resolved "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz#3050700dae2e4c8b67c4c3f666cdb8af405e1ce5"
   integrity sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==
-pretty-hrtime@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
-  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
-
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -5364,16 +5233,6 @@ pupa@^2.0.0:
   dependencies:
     escape-goat "^2.0.0"
-purgecss@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.npmjs.org/purgecss/-/purgecss-2.3.0.tgz#5327587abf5795e6541517af8b190a6fb5488bb3"
-  integrity sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==
-  dependencies:
-    commander "^5.0.0"
-    glob "^7.0.0"
-    postcss "7.0.32"
-    postcss-selector-parser "^6.0.2"
-
 q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
@@ -5551,14 +5410,6 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
-reduce-css-calc@^2.1.6:
-  version "2.1.7"
-  resolved "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz#1ace2e02c286d78abcd01fd92bfe8097ab0602c2"
-  integrity sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==
-  dependencies:
-    css-unit-converter "^1.1.1"
-    postcss-value-parser "^3.3.0"
-
 regenerator-runtime@^0.13.4:
   version "0.13.7"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
@@ -5713,7 +5564,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.3.2:
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.17.0, resolve@^1.3.2:
   version "1.17.0"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
   integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
@@ -6001,13 +5852,6 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
-simple-swizzle@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
-  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
-  dependencies:
-    is-arrayish "^0.3.1"
-
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@@ -6435,7 +6279,7 @@ supports-color@^4.0.0:
   dependencies:
     has-flag "^2.0.0"
-supports-color@^5.3.0, supports-color@^5.4.0:
+supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -6481,34 +6325,6 @@ table@^6.0.1:
     slice-ansi "^4.0.0"
     string-width "^4.2.0"
-tailwindcss@^1.8.13:
-  version "1.8.13"
-  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.8.13.tgz#ee57050a516d342bafc92cb74b4de6f92e44c189"
-  integrity sha512-z3R/6qPqfjauSR4qHhlA8I0OnfSyuotvigXISq666k+V52VSs5HV//KZ0Xe3qrZ4h5Um4OG5g+lcgjXSfURjDw==
-  dependencies:
-    "@fullhuman/postcss-purgecss" "^2.1.2"
-    autoprefixer "^9.4.5"
-    browserslist "^4.12.0"
-    bytes "^3.0.0"
-    chalk "^3.0.0 || ^4.0.0"
-    color "^3.1.2"
-    detective "^5.2.0"
-    fs-extra "^8.0.0"
-    html-tags "^3.1.0"
-    lodash "^4.17.20"
-    node-emoji "^1.8.1"
-    normalize.css "^8.0.1"
-    object-hash "^2.0.3"
-    postcss "^7.0.11"
-    postcss-functions "^3.0.0"
-    postcss-js "^2.0.0"
-    postcss-nested "^4.1.1"
-    postcss-selector-parser "^6.0.0"
-    postcss-value-parser "^4.1.0"
-    pretty-hrtime "^1.0.3"
-    reduce-css-calc "^2.1.6"
-    resolve "^1.14.2"
-
 tasksfile@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/tasksfile/-/tasksfile-5.1.1.tgz#7d5bc643bc0dc078b491a8fd9d19341c52599a95"
@@ -7137,7 +6953,7 @@ ws@^7.2.3:
   resolved "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz#d0547bf67f7ce4f12a72dfe31262c68d7dc551c8"
   integrity sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==
-xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.1:
+xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==