Remove unused styles

src/App.vue

@@ -81,7 +81,3 @@
     document.removeEventListener('mousedown', timekeeping);
   });
 </script>
-
-<style lang="less">
-  @import 'styles/index.less';
-</style>

src/directives/copy.ts

@@ -4,7 +4,7 @@
  * 接收参数：string类型/Ref<string>类型/Reactive<string>类型
  */
 import type { Directive, DirectiveBinding } from 'vue';
-import { useMessage } from 'naive-ui';
+
 interface ElType extends HTMLElement {
   copyData: string | number;
   __handleClick__: any;

src/directives/debounce.ts

@@ -3,29 +3,29 @@
  * 按钮防抖指令，可自行扩展至input
  * 接收参数：function类型
  */
-import type { Directive, DirectiveBinding } from "vue";
+import type { Directive, DirectiveBinding } from 'vue';
 interface ElType extends HTMLElement {
-	__handleClick__: () => any;
+  __handleClick__: () => any;
 }
 const debounce: Directive = {
-	mounted(el: ElType, binding: DirectiveBinding) {
+  mounted(el: ElType, binding: DirectiveBinding) {
-		if (typeof binding.value !== "function") {
+    if (typeof binding.value !== 'function') {
-			throw "callback must be a function";
+      throw 'callback must be a function';
-		}
+    }
-		let timer: NodeJS.Timeout | null = null;
+    let timer: NodeJS.Timeout | null = null;
-		el.__handleClick__ = function () {
+    el.__handleClick__ = function () {
-			if (timer) {
+      if (timer) {
-				clearInterval(timer);
+        clearInterval(timer);
-			}
+      }
-			timer = setTimeout(() => {
+      timer = setTimeout(() => {
-				binding.value();
+        binding.value();
-			}, 500);
+      }, 500);
-		};
+    };
-		el.addEventListener("click", el.__handleClick__);
+    el.addEventListener('click', el.__handleClick__);
-	},
+  },
-	beforeUnmount(el: ElType) {
+  beforeUnmount(el: ElType) {
-		el.removeEventListener("click", el.__handleClick__);
+    el.removeEventListener('click', el.__handleClick__);
-	}
+  },
 };
 
 export default debounce;

src/directives/draggable.ts

@@ -10,40 +10,40 @@
 	使用：在 Dom 上加上 v-draggable 即可
 	<div class="dialog-model" v-draggable></div>
 */
-import type { Directive } from "vue";
+import type { Directive } from 'vue';
 interface ElType extends HTMLElement {
-	parentNode: any;
+  parentNode: any;
 }
 const draggable: Directive = {
-	mounted: function (el: ElType) {
+  mounted: function (el: ElType) {
-		el.style.cursor = "move";
+    el.style.cursor = 'move';
-		el.style.position = "absolute";
+    el.style.position = 'absolute';
-		el.onmousedown = function (e) {
+    el.onmousedown = function (e) {
-			let disX = e.pageX - el.offsetLeft;
+      const disX = e.pageX - el.offsetLeft;
-			let disY = e.pageY - el.offsetTop;
+      const disY = e.pageY - el.offsetTop;
-			document.onmousemove = function (e) {
+      document.onmousemove = function (e) {
-				let x = e.pageX - disX;
+        let x = e.pageX - disX;
-				let y = e.pageY - disY;
+        let y = e.pageY - disY;
-				let maxX = el.parentNode.offsetWidth - el.offsetWidth;
+        const maxX = el.parentNode.offsetWidth - el.offsetWidth;
-				let maxY = el.parentNode.offsetHeight - el.offsetHeight;
+        const maxY = el.parentNode.offsetHeight - el.offsetHeight;
-				if (x < 0) {
+        if (x < 0) {
-					x = 0;
+          x = 0;
-				} else if (x > maxX) {
+        } else if (x > maxX) {
-					x = maxX;
+          x = maxX;
-				}
+        }
 
-				if (y < 0) {
+        if (y < 0) {
-					y = 0;
+          y = 0;
-				} else if (y > maxY) {
+        } else if (y > maxY) {
-					y = maxY;
+          y = maxY;
-				}
+        }
-				el.style.left = x + "px";
+        el.style.left = x + 'px';
-				el.style.top = y + "px";
+        el.style.top = y + 'px';
-			};
+      };
-			document.onmouseup = function () {
+      document.onmouseup = function () {
-				document.onmousemove = document.onmouseup = null;
+        document.onmousemove = document.onmouseup = null;
-			};
+      };
-		};
+    };
-	}
+  },
 };
 export default draggable;

src/directives/longpress.ts

@@ -2,48 +2,48 @@
  * v-longpress
  * 长按指令，长按时触发事件
  */
-import type { Directive, DirectiveBinding } from "vue";
+import type { Directive, DirectiveBinding } from 'vue';
 
 const directive: Directive = {
-	mounted(el: HTMLElement, binding: DirectiveBinding) {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
-		if (typeof binding.value !== "function") {
+    if (typeof binding.value !== 'function') {
-			throw "callback must be a function";
+      throw 'callback must be a function';
-		}
+    }
-		// 定义变量
+    // 定义变量
-		let pressTimer: any = null;
+    let pressTimer: any = null;
-		// 创建计时器（ 2秒后执行函数 ）
+    // 创建计时器（ 2秒后执行函数 ）
-		const start = (e: any) => {
+    const start = (e: any) => {
-			if (e.button) {
+      if (e.button) {
-				if (e.type === "click" && e.button !== 0) {
+        if (e.type === 'click' && e.button !== 0) {
-					return;
+          return;
-				}
+        }
-			}
+      }
-			if (pressTimer === null) {
+      if (pressTimer === null) {
-				pressTimer = setTimeout(() => {
+        pressTimer = setTimeout(() => {
-					handler(e);
+          handler(e);
-				}, 1000);
+        }, 1000);
-			}
+      }
-		};
+    };
-		// 取消计时器
+    // 取消计时器
-		const cancel = () => {
+    const cancel = () => {
-			if (pressTimer !== null) {
+      if (pressTimer !== null) {
-				clearTimeout(pressTimer);
+        clearTimeout(pressTimer);
-				pressTimer = null;
+        pressTimer = null;
-			}
+      }
-		};
+    };
-		// 运行函数
+    // 运行函数
-		const handler = (e: MouseEvent | TouchEvent) => {
+    const handler = (e: MouseEvent | TouchEvent) => {
-			binding.value(e);
+      binding.value(e);
-		};
+    };
-		// 添加事件监听器
+    // 添加事件监听器
-		el.addEventListener("mousedown", start);
+    el.addEventListener('mousedown', start);
-		el.addEventListener("touchstart", start);
+    el.addEventListener('touchstart', start);
-		// 取消计时器
+    // 取消计时器
-		el.addEventListener("click", cancel);
+    el.addEventListener('click', cancel);
-		el.addEventListener("mouseout", cancel);
+    el.addEventListener('mouseout', cancel);
-		el.addEventListener("touchend", cancel);
+    el.addEventListener('touchend', cancel);
-		el.addEventListener("touchcancel", cancel);
+    el.addEventListener('touchcancel', cancel);
-	}
+  },
 };
 
 export default directive;

src/directives/throttle.ts

@@ -8,34 +8,34 @@
   使用：给 Dom 加上 v-throttle 及回调函数即可
   <button v-throttle="debounceClick">节流提交</button>
 */
-import type { Directive, DirectiveBinding } from "vue";
+import type { Directive, DirectiveBinding } from 'vue';
 interface ElType extends HTMLElement {
-	__handleClick__: () => any;
+  __handleClick__: () => any;
-	disabled: boolean;
+  disabled: boolean;
 }
 const throttle: Directive = {
-	mounted(el: ElType, binding: DirectiveBinding) {
+  mounted(el: ElType, binding: DirectiveBinding) {
-		if (typeof binding.value !== "function") {
+    if (typeof binding.value !== 'function') {
-			throw "callback must be a function";
+      throw 'callback must be a function';
-		}
+    }
-		let timer: NodeJS.Timeout | null = null;
+    let timer: NodeJS.Timeout | null = null;
-		el.__handleClick__ = function () {
+    el.__handleClick__ = function () {
-			if (timer) {
+      if (timer) {
-				clearTimeout(timer);
+        clearTimeout(timer);
-			}
+      }
-			if (!el.disabled) {
+      if (!el.disabled) {
-				el.disabled = true;
+        el.disabled = true;
-				binding.value();
+        binding.value();
-				timer = setTimeout(() => {
+        timer = setTimeout(() => {
-					el.disabled = false;
+          el.disabled = false;
-				}, 1000);
+        }, 1000);
-			}
+      }
-		};
+    };
-		el.addEventListener("click", el.__handleClick__);
+    el.addEventListener('click', el.__handleClick__);
-	},
+  },
-	beforeUnmount(el: ElType) {
+  beforeUnmount(el: ElType) {
-		el.removeEventListener("click", el.__handleClick__);
+    el.removeEventListener('click', el.__handleClick__);
-	}
+  },
 };
 
 export default throttle;

src/layout/components/Header/index.vue

@@ -352,7 +352,7 @@
     justify-content: space-between;
     align-items: center;
     padding: 0;
-    height: @header-height;
+    height: 64px;
     box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
     transition: all 0.2s ease-in-out;
     width: 100%;

src/main.ts

@@ -33,6 +33,11 @@ async function bootstrap() {
   // https://router.vuejs.org/api/interfaces/router.html#isready
   await router.isReady();
 
+  // https://www.naiveui.com/en-US/os-theme/docs/style-conflict#About-Tailwind's-Preflight-Style-Override
+  const meta = document.createElement('meta');
+  meta.name = 'naive-ui-style';
+  document.head.appendChild(meta);
+
   app.mount('#app', true);
 }
 

src/plugins/naive.ts

@@ -1,73 +1,141 @@
 import type { App } from 'vue';
-import * as NaiveUI from 'naive-ui';
+import {
+  create,
+  NMessageProvider,
+  NDialogProvider,
+  NConfigProvider,
+  NInput,
+  NButton,
+  NForm,
+  NFormItem,
+  NCheckboxGroup,
+  NCheckbox,
+  NIcon,
+  NLayout,
+  NLayoutHeader,
+  NLayoutContent,
+  NLayoutFooter,
+  NLayoutSider,
+  NMenu,
+  NBreadcrumb,
+  NBreadcrumbItem,
+  NDropdown,
+  NSpace,
+  NTooltip,
+  NAvatar,
+  NTabs,
+  NTabPane,
+  NCard,
+  NRow,
+  NCol,
+  NDrawer,
+  NDrawerContent,
+  NDivider,
+  NSwitch,
+  NBadge,
+  NAlert,
+  NElement,
+  NTag,
+  NNotificationProvider,
+  NProgress,
+  NDatePicker,
+  NGrid,
+  NGridItem,
+  NList,
+  NListItem,
+  NThing,
+  NDataTable,
+  NPopover,
+  NPagination,
+  NSelect,
+  NRadioGroup,
+  NRadio,
+  NSteps,
+  NStep,
+  NInputGroup,
+  NResult,
+  NDescriptions,
+  NDescriptionsItem,
+  NTable,
+  NInputNumber,
+  NLoadingBarProvider,
+  NModal,
+  NUpload,
+  NTree,
+  NSpin,
+  NTimePicker,
+  NBackTop,
+  NSkeleton,
+} from 'naive-ui';
 
-const naive = NaiveUI.create({
+// https://www.naiveui.com/en-US/os-theme/docs/import-on-demand
+const naive = create({
   components: [
-    NaiveUI.NMessageProvider,
+    NMessageProvider,
-    NaiveUI.NDialogProvider,
+    NDialogProvider,
-    NaiveUI.NConfigProvider,
+    NConfigProvider,
-    NaiveUI.NInput,
+    NInput,
-    NaiveUI.NButton,
+    NButton,
-    NaiveUI.NForm,
+    NForm,
-    NaiveUI.NFormItem,
+    NFormItem,
-    NaiveUI.NCheckboxGroup,
+    NCheckboxGroup,
-    NaiveUI.NCheckbox,
+    NCheckbox,
-    NaiveUI.NIcon,
+    NIcon,
-    NaiveUI.NLayout,
+    NLayout,
-    NaiveUI.NLayoutHeader,
+    NLayoutHeader,
-    NaiveUI.NLayoutContent,
+    NLayoutContent,
-    NaiveUI.NLayoutFooter,
+    NLayoutFooter,
-    NaiveUI.NLayoutSider,
+    NLayoutSider,
-    NaiveUI.NMenu,
+    NMenu,
-    NaiveUI.NBreadcrumb,
+    NBreadcrumb,
-    NaiveUI.NBreadcrumbItem,
+    NBreadcrumbItem,
-    NaiveUI.NDropdown,
+    NDropdown,
-    NaiveUI.NSpace,
+    NSpace,
-    NaiveUI.NTooltip,
+    NTooltip,
-    NaiveUI.NAvatar,
+    NAvatar,
-    NaiveUI.NTabs,
+    NTabs,
-    NaiveUI.NTabPane,
+    NTabPane,
-    NaiveUI.NCard,
+    NCard,
-    NaiveUI.NRow,
+    NRow,
-    NaiveUI.NCol,
+    NCol,
-    NaiveUI.NDrawer,
+    NDrawer,
-    NaiveUI.NDrawerContent,
+    NDrawerContent,
-    NaiveUI.NDivider,
+    NDivider,
-    NaiveUI.NSwitch,
+    NSwitch,
-    NaiveUI.NBadge,
+    NBadge,
-    NaiveUI.NAlert,
+    NAlert,
-    NaiveUI.NElement,
+    NElement,
-    NaiveUI.NTag,
+    NTag,
-    NaiveUI.NNotificationProvider,
+    NNotificationProvider,
-    NaiveUI.NProgress,
+    NProgress,
-    NaiveUI.NDatePicker,
+    NDatePicker,
-    NaiveUI.NGrid,
+    NGrid,
-    NaiveUI.NGridItem,
+    NGridItem,
-    NaiveUI.NList,
+    NList,
-    NaiveUI.NListItem,
+    NListItem,
-    NaiveUI.NThing,
+    NThing,
-    NaiveUI.NDataTable,
+    NDataTable,
-    NaiveUI.NPopover,
+    NPopover,
-    NaiveUI.NPagination,
+    NPagination,
-    NaiveUI.NSelect,
+    NSelect,
-    NaiveUI.NRadioGroup,
+    NRadioGroup,
-    NaiveUI.NRadio,
+    NRadio,
-    NaiveUI.NSteps,
+    NSteps,
-    NaiveUI.NStep,
+    NStep,
-    NaiveUI.NInputGroup,
+    NInputGroup,
-    NaiveUI.NResult,
+    NResult,
-    NaiveUI.NDescriptions,
+    NDescriptions,
-    NaiveUI.NDescriptionsItem,
+    NDescriptionsItem,
-    NaiveUI.NTable,
+    NTable,
-    NaiveUI.NInputNumber,
+    NInputNumber,
-    NaiveUI.NLoadingBarProvider,
+    NLoadingBarProvider,
-    NaiveUI.NModal,
+    NModal,
-    NaiveUI.NUpload,
+    NUpload,
-    NaiveUI.NTree,
+    NTree,
-    NaiveUI.NSpin,
+    NSpin,
-    NaiveUI.NTimePicker,
+    NTimePicker,
-    NaiveUI.NBackTop,
+    NBackTop,
-    NaiveUI.NSkeleton,
+    NSkeleton,
   ],
 });
 

src/styles/common.less

@@ -1,135 +0,0 @@
-#app,
-body,
-html {
-  height: 100%;
-}
-
-body {
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
-    '\5FAE\8F6F\96C5\9ED1', Arial, sans-serif;
-  line-height: 1.5;
-  color: #515a6e;
-  font-size: 14px;
-  background-color: #f7f7f7;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-//重置样式
-.anticon {
-  svg {
-    vertical-align: initial;
-  }
-}
-
-a {
-  color: #2d8cf0;
-  background: transparent;
-  text-decoration: none;
-  outline: none;
-  cursor: pointer;
-  transition: color 0.2s ease;
-}
-
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
-a:hover {
-  color: #57a3f3;
-}
-
-a:active {
-  color: #2b85e4;
-}
-
-a:active,
-a:hover {
-  outline: 0;
-  text-decoration: none;
-}
-
-/* 滚动条凹槽的颜色，还可以设置边框属性 */
-*::-webkit-scrollbar-track-piece {
-  background-color: #f8f8f8;
-  -webkit-border-radius: 2em;
-  -moz-border-radius: 2em;
-  border-radius: 2em;
-}
-
-/* 滚动条的宽度 */
-*::-webkit-scrollbar {
-  width: 9px;
-  height: 9px;
-}
-
-/* 滚动条的设置 */
-*::-webkit-scrollbar-thumb {
-  background-color: #ddd;
-  background-clip: padding-box;
-  -webkit-border-radius: 2em;
-  -moz-border-radius: 2em;
-  border-radius: 2em;
-}
-
-/* 滚动条鼠标移上去 */
-*::-webkit-scrollbar-thumb:hover {
-  background-color: #bbb;
-}
-
-/* router view transition */
-.zoom-fade-enter-active,
-.zoom-fade-leave-active {
-  transition: transform 0.35s, opacity 0.28s ease-in-out;
-}
-
-.zoom-fade-enter-from {
-  opacity: 0;
-  transform: scale(0.97);
-}
-
-.zoom-fade-leave-to {
-  opacity: 0;
-  transform: scale(1.03);
-}
-
-//antd 卡片样式定制
-body .n-card {
-  transition: all 0.2s ease-in-out;
-}
-
-body .n-icon {
-  vertical-align: middle;
-}
-
-body .proCard {
-  border-radius: 4px;
-
-  .n-card__content {
-    padding: 16px;
-
-    &:first-child {
-      padding-top: 16px;
-    }
-  }
-}
-
-body .n-modal {
-  border-radius: 6px;
-}
-
-//body .proCardTabs{
-//  .n-card__content{ padding-top: 3px}
-//  .n-card__content:first-child{ padding-top: 3px}
-//}
-
-.n-layout-page-header {
-  margin: 0 -10px;
-}
-
-img, video{
-  display: block;
-  max-width: 100%;
-  height: auto;
-}

src/styles/index.less

@@ -1,3 +0,0 @@
-@import 'transition/index.less';
-@import './var.less';
-@import './common.less';

src/styles/transition/base.less

@@ -1,18 +0,0 @@
-.transition-default() {
-  &-enter-active,
-  &-leave-active {
-    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
-  }
-
-  &-move {
-    transition: transform 0.4s;
-  }
-}
-
-.expand-transition {
-  .transition-default();
-}
-
-.expand-x-transition {
-  .transition-default();
-}

src/styles/transition/fade.less

@@ -1,81 +0,0 @@
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease-in-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-/* fade-slide */
-.fade-slide-leave-active,
-.fade-slide-enter-active {
-  transition: all 0.3s;
-}
-
-.fade-slide-enter-from {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-.fade-slide-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-// ///////////////////////////////////////////////
-// Fade Bottom
-// ///////////////////////////////////////////////
-
-// Speed: 1x
-.fade-bottom-enter-active,
-.fade-bottom-leave-active {
-  transition: opacity 0.25s, transform 0.3s;
-}
-
-.fade-bottom-enter-from {
-  opacity: 0;
-  transform: translateY(-10%);
-}
-
-.fade-bottom-leave-to {
-  opacity: 0;
-  transform: translateY(10%);
-}
-
-// fade-scale
-.fade-scale-leave-active,
-.fade-scale-enter-active {
-  transition: all 0.28s;
-}
-
-.fade-scale-enter-from {
-  opacity: 0;
-  transform: scale(1.2);
-}
-
-.fade-scale-leave-to {
-  opacity: 0;
-  transform: scale(0.8);
-}
-
-// ///////////////////////////////////////////////
-// Fade Top
-// ///////////////////////////////////////////////
-
-// Speed: 1x
-.fade-top-enter-active,
-.fade-top-leave-active {
-  transition: opacity 0.2s, transform 0.25s;
-}
-
-.fade-top-enter-from {
-  opacity: 0;
-  transform: translateY(8%);
-}
-
-.fade-top-leave-to {
-  opacity: 0;
-  transform: translateY(-8%);
-}

src/styles/transition/index.less

@@ -1,10 +0,0 @@
-@import './base.less';
-@import './fade.less';
-@import './scale.less';
-@import './slide.less';
-@import './scroll.less';
-@import './zoom.less';
-
-.collapse-transition {
-  transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out, 0.2s padding-bottom ease-in-out;
-}

src/styles/transition/scale.less

@@ -1,21 +0,0 @@
-.scale-transition {
-  .transition-default();
-
-  &-enter-from,
-  &-leave,
-  &-leave-to {
-    opacity: 0;
-    transform: scale(0);
-  }
-}
-
-.scale-rotate-transition {
-  .transition-default();
-
-  &-enter-from,
-  &-leave,
-  &-leave-to {
-    opacity: 0;
-    transform: scale(0) rotate(-45deg);
-  }
-}

src/styles/transition/scroll.less

@@ -1,67 +0,0 @@
-.scroll-y-transition {
-  .transition-default();
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-from {
-    transform: translateY(-15px);
-  }
-
-  &-leave-to {
-    transform: translateY(15px);
-  }
-}
-
-.scroll-y-reverse-transition {
-  .transition-default();
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-from {
-    transform: translateY(15px);
-  }
-
-  &-leave-to {
-    transform: translateY(-15px);
-  }
-}
-
-.scroll-x-transition {
-  .transition-default();
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-from {
-    transform: translateX(-15px);
-  }
-
-  &-leave-to {
-    transform: translateX(15px);
-  }
-}
-
-.scroll-x-reverse-transition {
-  .transition-default();
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-from {
-    transform: translateX(15px);
-  }
-
-  &-leave-to {
-    transform: translateX(-15px);
-  }
-}

src/styles/transition/slide.less

@@ -1,39 +0,0 @@
-.slide-y-transition {
-  .transition-default();
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateY(-15px);
-  }
-}
-
-.slide-y-reverse-transition {
-  .transition-default();
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateY(15px);
-  }
-}
-
-.slide-x-transition {
-  .transition-default();
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateX(-15px);
-  }
-}
-
-.slide-x-reverse-transition {
-  .transition-default();
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateX(15px);
-  }
-}

src/styles/transition/zoom.less

@@ -1,27 +0,0 @@
-// zoom-out
-.zoom-out-enter-active,
-.zoom-out-leave-active {
-  transition: opacity 0.1 ease-in-out, transform 0.15s ease-out;
-}
-
-.zoom-out-enter-from,
-.zoom-out-leave-to {
-  opacity: 0;
-  transform: scale(0);
-}
-
-// zoom-fade
-.zoom-fade-enter-active,
-.zoom-fade-leave-active {
-  transition: transform 0.2s, opacity 0.3s ease-out;
-}
-
-.zoom-fade-enter-from {
-  opacity: 0;
-  transform: scale(0.92);
-}
-
-.zoom-fade-leave-to {
-  opacity: 0;
-  transform: scale(1.06);
-}

src/styles/var.less

@@ -1,4 +0,0 @@
-@primaryColor: #2d8cf0;
-@primaryColorHover: #57a3f3;
-@header-height: 64px;
-@footer-height: 70px;

tailwind.config.js

@@ -1,9 +1,5 @@
 module.exports = {
-  plugins: [createEnterPlugin()],
   content: ['./index.html', './src/**/*.{vue,ts,tsx}'],
-  corePlugins: {
-    preflight: false,
-  },
   theme: {
     extend: {
       zIndex: {
@@ -25,52 +21,3 @@ module.exports = {
     },
   },
 };
-/**
- * Used for animation when the element is displayed
- * @param maxOutput The larger the maxOutput output, the larger the generated css volume
- */
-function createEnterPlugin(maxOutput = 6) {
-  const createCss = (index, d = 'x') => {
-    const upd = d.toUpperCase();
-    return {
-      [`*> .enter-${d}:nth-child(${index})`]: {
-        transform: `translate${upd}(50px)`,
-      },
-      [`*> .-enter-${d}:nth-child(${index})`]: {
-        transform: `translate${upd}(-50px)`,
-      },
-      [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
-        'z-index': `${10 - index}`,
-        opacity: '0',
-        animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
-        'animation-fill-mode': 'forwards',
-        'animation-delay': `${(index * 1) / 10}s`,
-      },
-    };
-  };
-  const handler = ({ addBase }) => {
-    const addRawCss = {};
-    for (let index = 1; index < maxOutput; index++) {
-      Object.assign(addRawCss, {
-        ...createCss(index, 'x'),
-        ...createCss(index, 'y'),
-      });
-    }
-    addBase({
-      ...addRawCss,
-      [`@keyframes enter-x-animation`]: {
-        to: {
-          opacity: '1',
-          transform: 'translateX(0)',
-        },
-      },
-      [`@keyframes enter-y-animation`]: {
-        to: {
-          opacity: '1',
-          transform: 'translateY(0)',
-        },
-      },
-    });
-  };
-  return { handler };
-}

vite.config.ts

@@ -46,15 +46,15 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     define: {
       __APP_INFO__: JSON.stringify(__APP_INFO__),
     },
-    css: {
+    // css: {
-      preprocessorOptions: {
+    //   preprocessorOptions: {
-        less: {
+    //     less: {
-          modifyVars: {},
+    //       modifyVars: {},
-          javascriptEnabled: true,
+    //       javascriptEnabled: true,
-          additionalData: `@import "src/styles/var.less";`,
+    //       additionalData: `@import "src/styles/var.less";`,
-        },
+    //     },
-      },
+    //   },
-    },
+    // },
     server: {
       host: true,
       port: VITE_PORT,