feat: add system animation settings

apps/admin/autoResolver/components.d.ts

@@ -36,6 +36,7 @@ declare module 'vue' {
     NPopover: typeof import('@celeris/ca-components')['NPopover']
     NResult: typeof import('@celeris/ca-components')['NResult']
     NScrollbar: typeof import('@celeris/ca-components')['NScrollbar']
+    NSelect: typeof import('@celeris/ca-components')['NSelect']
     NSpace: typeof import('@celeris/ca-components')['NSpace']
     NSpin: typeof import('@celeris/ca-components')['NSpin']
     NSwitch: typeof import('@celeris/ca-components')['NSwitch']

apps/admin/src/composables/setting/useTransitionSetting.ts

@@ -10,7 +10,23 @@ export function useTransitionSetting() {
 
   const getShouldOpenPageLoading = toRef(() => appStore.getTransitionSetting.shouldOpenPageLoading);
 
-  const getBasicTransition = toRef(() => appStore.getTransitionSetting.basicTransition);
+  const getRouterBasicTransition = toRef(() => appStore.getTransitionSetting.routerBasicTransition);
+
+  const setRouterBasicTransition = (routerBasicTransition: TransitionSetting["routerBasicTransition"]) => {
+    appStore.setProjectSetting({ transitionSetting: { routerBasicTransition } });
+  };
+
+  const setShouldEnableTransition = (shouldEnable: TransitionSetting["shouldEnable"]) => {
+    appStore.setProjectSetting({ transitionSetting: { shouldEnable } });
+  };
+
+  const setShouldOpenNProgress = (shouldOpenNProgress: TransitionSetting["shouldOpenNProgress"]) => {
+    appStore.setProjectSetting({ transitionSetting: { shouldOpenNProgress } });
+  };
+
+  const setShouldOpenPageLoading = (shouldOpenPageLoading: TransitionSetting["shouldOpenPageLoading"]) => {
+    appStore.setProjectSetting({ transitionSetting: { shouldOpenPageLoading } });
+  };
 
   function getTransitionSetting() {
     return appStore.getTransitionSetting;
@@ -23,8 +39,12 @@ export function useTransitionSetting() {
     setTransitionSetting,
 
     getShouldEnableTransition,
+    setShouldEnableTransition,
     getShouldOpenNProgress,
+    setShouldOpenNProgress,
     getShouldOpenPageLoading,
-    getBasicTransition,
+    setShouldOpenPageLoading,
+    getRouterBasicTransition,
+    setRouterBasicTransition,
   };
 }

apps/admin/src/layouts/setting/components/SettingDrawer/components/SettingTransition/index.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { RouterTransitionConstants } from "@celeris/constants";
+import { SettingMenu } from "~/layouts/setting/components/SettingDrawer/components";
+import { useTransitionSetting } from "~/composables";
+
+const { t } = useI18n();
+const {
+  getShouldEnableTransition,
+  setShouldEnableTransition,
+  getShouldOpenNProgress,
+  setShouldOpenNProgress,
+  getShouldOpenPageLoading,
+  setShouldOpenPageLoading,
+  getRouterBasicTransition,
+  setRouterBasicTransition,
+} = useTransitionSetting();
+
+function convertTransitionConstantsToOptions<T extends Record<string, string>>(transitionConstants: T): { label: string; value: T[keyof T] }[] {
+  const options: { label: string; value: T[keyof T] }[] = [];
+  for (const key in transitionConstants) {
+    if (Number.isNaN(Number(key))) {
+      options.push({
+        label: key,
+        value: transitionConstants[key as keyof T],
+      });
+    }
+  }
+  return options;
+}
+</script>
+
+<template>
+  <NDivider title-placement="center">
+    {{ t('layouts.header.transitionSetting.title') }}
+  </NDivider>
+  <NSpace vertical size="large">
+    <SettingMenu :label="t('layouts.header.transitionSetting.enableTransition')">
+      <NSwitch :value="getShouldEnableTransition" @update:value="setShouldEnableTransition" />
+    </SettingMenu>
+    <SettingMenu :label="t('layouts.header.transitionSetting.enableProgressBar')">
+      <NSwitch :disabled="!getShouldEnableTransition" :value="getShouldOpenNProgress" @update:value="setShouldOpenNProgress" />
+    </SettingMenu>
+    <SettingMenu :label="t('layouts.header.transitionSetting.enablePageLoadingTransition')">
+      <NSwitch :disabled="!getShouldEnableTransition" :value="getShouldOpenPageLoading" @update:value="setShouldOpenPageLoading" />
+    </SettingMenu>
+    <SettingMenu :label="t('layouts.header.transitionSetting.routeTransition')">
+      <NSelect
+        class="w-1/2"
+        size="small"
+        :disabled="!getShouldEnableTransition"
+        :value="getRouterBasicTransition"
+        :options="convertTransitionConstantsToOptions(RouterTransitionConstants)"
+        @update:value="setRouterBasicTransition"
+      />
+    </SettingMenu>
+  </NSpace>
+</template>
+
+<style scoped>
+
+</style>

apps/admin/src/layouts/setting/components/SettingDrawer/components/index.ts

@@ -1,6 +1,7 @@
 import DarkMode from "./DarkMode/index.vue";
 import SettingMenu from "./SettingMenu/index.vue";
+import SettingTransition from "./SettingTransition/index.vue";
 import ThemeBackup from "./ThemeBackup/index.vue";
 import ThemeColor from "./ThemeColor/index.vue";
 
-export { DarkMode, SettingMenu, ThemeBackup, ThemeColor };
+export { DarkMode, SettingMenu, SettingTransition, ThemeBackup, ThemeColor };

apps/admin/src/layouts/setting/components/SettingDrawer/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useHeaderSetting } from "~/composables";
-import { DarkMode, ThemeBackup, ThemeColor } from "~/layouts/setting/components/SettingDrawer/components";
+import { DarkMode, SettingTransition, ThemeBackup, ThemeColor } from "~/layouts/setting/components/SettingDrawer/components";
 
 defineOptions({
   name: "SettingDrawer",
@@ -18,6 +18,7 @@ const { t } = useI18n();
       <DarkMode />
       <ThemeColor />
       <ThemeBackup />
+      <SettingTransition />
     </NDrawerContent>
   </NDrawer>
 </template>

apps/admin/src/layouts/transition.ts

@@ -10,10 +10,10 @@ interface TransitionOptions {
 }
 
 export function getTransitionName({ route }: Context, { enableTransition }: TransitionOptions): string | undefined {
-  const { getBasicTransition } = useTransitionSetting();
-  if (!enableTransition) {
+  const { getRouterBasicTransition, getShouldEnableTransition } = useTransitionSetting();
+  if (!enableTransition || !toValue(getShouldEnableTransition)) {
     return undefined;
   }
 
-  return (route.meta.transitionName as string) || toValue(getBasicTransition);
+  return (route.meta.transitionName as string) || toValue(getRouterBasicTransition);
 }

apps/admin/src/locales/en.json

@@ -48,6 +48,13 @@
           "copyConfigSuccess": "Configuration copied successfully!",
           "resetConfigSuccess": "Configuration reset successfully!"
         }
+      },
+      "transitionSetting": {
+        "title": "Animation Settings",
+        "enableTransition": "Enable Animation",
+        "enableProgressBar": "Enable Progress Bar",
+        "enablePageLoadingTransition": "Enable Page Loading Animation",
+        "routeTransition": "Route Transition"
       }
     },
     "userInfo": {

apps/admin/src/locales/zh.json

@@ -48,6 +48,13 @@
           "copyConfigSuccess": "拷贝配置成功！",
           "resetConfigSuccess": "重置配置成功！"
         }
+      },
+      "transitionSetting": {
+        "title": "动画设置",
+        "enableTransition": "开启动画",
+        "enableProgressBar": "开启进度条",
+        "enablePageLoadingTransition": "开启页面加载动画",
+        "routeTransition": "切换路由动画"
       }
     },
     "userInfo": {

apps/admin/src/router/guard/index.ts

@@ -94,21 +94,21 @@ export function createHttpGuard(router: Router) {
  * @param router - 路由对象。
  */
 export function createProgressGuard(router: Router) {
-  const { getShouldOpenNProgress } = useTransitionSetting();
+  const { getShouldEnableTransition, getShouldOpenNProgress } = useTransitionSetting();
   router.beforeEach((to) => {
     // 如果目标路由已经加载过，则直接放行
     // If the target route has been loaded, pass directly
     if (to.meta.loaded) {
       return true;
     }
-    if (toValue(getShouldOpenNProgress) && !NProgress.isStarted()) {
+    if (toValue(getShouldEnableTransition) && toValue(getShouldOpenNProgress) && !NProgress.isStarted()) {
       NProgress.start();
     }
     return true;
   });
 
   router.afterEach(() => {
-    if (toValue(getShouldOpenNProgress)) {
+    if (toValue(getShouldEnableTransition) && toValue(getShouldOpenNProgress)) {
       NProgress.done();
     }
     return true;

apps/admin/src/router/guard/pageLoadingGuard.ts

@@ -5,7 +5,7 @@ import { useUserStoreWithOut } from "~/store/modules/user";
 export function createPageLoadingGuard(router: Router) {
   const userStore = useUserStoreWithOut();
   const appStore = useAppStoreWithOut();
-  const { getShouldOpenPageLoading } = useTransitionSetting();
+  const { getShouldEnableTransition, getShouldOpenPageLoading } = useTransitionSetting();
 
   router.beforeEach((to) => {
     if (!userStore.getToken) {
@@ -15,7 +15,7 @@ export function createPageLoadingGuard(router: Router) {
       return true;
     }
 
-    if (toValue(getShouldOpenPageLoading)) {
+    if (toValue(getShouldEnableTransition) && toValue(getShouldOpenPageLoading)) {
       appStore.setPageLoadingAction(true);
       return true;
     }

apps/admin/src/setting/projectSetting.ts

@@ -87,7 +87,7 @@ export const DEFAULT_PROJECT_SETTING: ProjectSetting = {
     shouldEnable: true,
     // 路由基本切换动画
     // Route basic switching animation
-    basicTransition: RouterTransitionConstants.FADE,
+    routerBasicTransition: RouterTransitionConstants.FADE,
     // 是否开启页面切换加载
     // Whether to open page switching loading
     shouldOpenPageLoading: true,

packages/node/vite/src/plugins/unocss.ts

@@ -79,6 +79,37 @@ export function createUnoCSSPluginConfig(): PluginOption {
         error_suppl: "rgb(var(--error-color-suppl))",
         error_pressed: "rgb(var(--error-color-pressed))",
       },
+      // https://github.com/ai/easings.net
+      transitionTimingFunction: {
+        "css": "ease",
+        "css-in": "ease-in",
+        "css-out": "ease-out",
+        "css-in-out": "ease-in-out",
+        "in-sine": "cubic-bezier(0.12, 0, 0.39, 0)",
+        "out-sine": "cubic-bezier(0.61, 1, 0.88, 1)",
+        "in-out-sine": "cubic-bezier(0.37, 0, 0.63, 1)",
+        "in-quad": "cubic-bezier(0.11, 0, 0.5, 0)",
+        "out-quad": "cubic-bezier(0.5, 1, 0.89, 1)",
+        "in-out-quad": "cubic-bezier(0.45, 0, 0.55, 1)",
+        "in-cubic": "cubic-bezier(0.32, 0, 0.67, 0)",
+        "out-cubic": "cubic-bezier(0.33, 1, 0.68, 1)",
+        "in-out-cubic": "cubic-bezier(0.65, 0, 0.35, 1)",
+        "in-quart": "cubic-bezier(0.5, 0, 0.75, 0)",
+        "out-quart": "cubic-bezier(0.25, 1, 0.5, 1)",
+        "in-out-quart": "cubic-bezier(0.76, 0, 0.24, 1)",
+        "in-quint": "cubic-bezier(0.64, 0, 0.78, 0)",
+        "out-quint": "cubic-bezier(0.22, 1, 0.36, 1)",
+        "in-out-quint": "cubic-bezier(0.83, 0, 0.17, 1)",
+        "in-expo": "cubic-bezier(0.7, 0, 0.84, 0)",
+        "out-expo": "cubic-bezier(0.16, 1, 0.3, 1)",
+        "in-out-expo": "cubic-bezier(0.87, 0, 0.13, 1)",
+        "in-circ": "cubic-bezier(0.55, 0, 1, 0.45)",
+        "out-circ": "cubic-bezier(0, 0.55, 0.45, 1)",
+        "in-out-circ": "cubic-bezier(0.85, 0, 0.15, 1)",
+        "in-back": "cubic-bezier(0.36, 0, 0.66, -0.56)",
+        "out-back": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+        "in-out-back": "cubic-bezier(0.68, -0.6, 0.32, 1.6)",
+      },
     },
     transformers: [
       transformerDirectives(),

packages/web/constants/src/themeConstants.ts

@@ -1,4 +1,5 @@
 /**
+ * 定义系统中在切换不同路由时使用的不同类型的动画过渡效果。
  * Defines different types of animation transitions used when switching between different routes in a system.
  */
 export enum RouterTransitionConstants {
@@ -15,7 +16,7 @@ export enum RouterTransitionConstants {
   /**
    * A transition that fades out the previous route to the side, then fades in the new route from the opposite side.
    */
-  FADE_SIDE = "fade-slide",
+  FADE_SLIDE = "fade-slide",
 
   /**
    * A simple fade transition.

packages/web/styles/index.ts

@@ -2,3 +2,4 @@
 import "@kirklin/reset-css/kirklin.css";
 import "./src/index.css";
 import "uno.css";
+import "animate.css";

packages/web/styles/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@kirklin/reset-css": "^0.0.3",
+    "animate.css": "^4.1.1",
     "unocss-preset-chinese": "^0.0.6"
   },
   "devDependencies": {

packages/web/styles/src/index.css

@@ -1,4 +1,3 @@
-@import "variables.css";
 @import "transition.css";
 
 html{

packages/web/styles/src/transition.css

@@ -1,7 +1,7 @@
 /* zoom-fade */
 .zoom-fade-leave-active,
 .zoom-fade-enter-active {
-  transition: all 0.3s cubic-bezier(.55,0,.1,1);
+  transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
 }
 .zoom-fade-enter-from {
   opacity: 0;
@@ -19,7 +19,7 @@
 /* zoom-out */
 .zoom-out-leave-active,
 .zoom-out-enter-active {
-  transition: all 0.3s cubic-bezier(.55,0,.1,1);
+  transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
 }
 .zoom-out-enter-from {
   opacity: 0;
@@ -37,7 +37,7 @@
 /* fade-slide */
 .fade-slide-leave-active,
 .fade-slide-enter-active {
-  transition: all 0.3s cubic-bezier(.55,0,.1,1);
+  transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
 }
 .fade-slide-enter-from {
   opacity: 0;
@@ -55,7 +55,7 @@
 /* fade */
 .fade-leave-active,
 .fade-enter-active {
-  transition: all 0.2s;
+  transition: all 0.5s;
 }
 .fade-enter-from {
   opacity: 0;
@@ -67,7 +67,7 @@
 /* fade-bottom */
 .fade-bottom-leave-active,
 .fade-bottom-enter-active {
-  transition: all 0.3s cubic-bezier(.55,0,.1,1);
+  transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
 }
 .fade-bottom-enter-from {
   opacity: 0;
@@ -85,7 +85,7 @@
 /* fade-scale */
 .fade-scale-leave-active,
 .fade-scale-enter-active {
-  transition: all 0.3s cubic-bezier(.55,0,.1,1);
+  transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
 }
 .fade-scale-enter-from {
   opacity: 0;

packages/web/types/src/config.ts

@@ -35,7 +35,7 @@ export interface TransitionSetting {
   shouldEnable: boolean;
   // 路由基本切换动画
   // Route basic switching animation
-  basicTransition: RouterTransitionConstants;
+  routerBasicTransition: RouterTransitionConstants;
   // 是否开启页面切换加载
   // Whether to open page switching loading
   shouldOpenPageLoading: boolean;