From cc8560a0489b7e8a06fee7cb389f3820995b7192 Mon Sep 17 00:00:00 2001
From: XFeng <wxfengg@qq.com>
Date: Tue, 13 Jan 2026 18:03:47 +0800
Subject: [PATCH 1/3] =?UTF-8?q?refactor(OperationColumn):=20=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E5=8A=A8=E6=80=81=E5=AE=BD=E5=BA=A6=E8=AE=A1=E7=AE=97?=
 =?UTF-8?q?=E7=9A=84=E6=93=8D=E4=BD=9C=E5=88=97=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 用更动态的方法代替静态宽度计算
- 优化计算逻辑代码
---
 src/components/OperationColumn/index.vue | 98 ++++++++++--------------
 1 file changed, 40 insertions(+), 58 deletions(-)

diff --git a/src/components/OperationColumn/index.vue b/src/components/OperationColumn/index.vue
index f9f26eef..f7b9cdef 100644
--- a/src/components/OperationColumn/index.vue
+++ b/src/components/OperationColumn/index.vue
@@ -1,28 +1,29 @@
 <template>
-  <el-table-column
-    :label="label"
-    :fixed="fixed"
-    :align="align"
-    :show-overflow-tooltip="showOverflowTooltip"
-    :width="finalWidth"
-  >
+  <el-table-column :prop :label :fixed :align :show-overflow-tooltip :width="finalWidth">
     <template #default="{ row }">
-      <div v-auto-width class="operation-buttons">
-        <slot :row="row"></slot>
+      <div v-auto class="operation-button">
+        <slot :row="row" />
       </div>
     </template>
   </el-table-column>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 interface Props {
+  /**
+   * 表格数据长度
+   * 用于性能优化，避免多次计算宽度
+   */
   listDataLength: number;
   prop?: string;
   label?: string;
   fixed?: string;
   align?: string;
-  width?: number;
   showOverflowTooltip?: boolean;
+  /**
+   * 最小宽度，优先级高于自动计算宽度，默认80px
+   * @default 80px
+   */
   minWidth?: number;
 }
 
@@ -30,62 +31,43 @@ const props = withDefaults(defineProps<Props>(), {
   label: "操作",
   fixed: "right",
   align: "center",
-  minWidth: 80,
 });
 
 const count = ref(0);
-const operationWidth = ref(props.minWidth || 80);
-
-// 计算操作列宽�?
+const maxWidth = ref(80);
 const calculateWidth = () => {
   count.value++;
-
   if (count.value !== props.listDataLength) return;
-  const maxWidth = getOperationMaxWidth();
-  operationWidth.value = Math.max(maxWidth, props.minWidth);
+
+  let totalWidth = 0;
+  maxWidth.value = 80; // 重置为初始值
+  const els = document.getElementsByClassName("operation-button");
+  Array.from(els).forEach((el) => {
+    const buttons = el.querySelectorAll(".el-button");
+    totalWidth = Array.from(buttons).reduce((prev, button) => {
+      // 14 是按钮之间的距离
+      // 组成：按钮的左边距(Element Plus默认为12px)+按钮的padding(Element Plus默认为2px)
+      return prev + button.scrollWidth + 14;
+    }, 24); // 24 是左右内边距
+
+    maxWidth.value = Math.max(maxWidth.value, totalWidth);
+  });
+
   count.value = 0;
 };
 
-// 计算最终宽�?
+const vAuto = {
+  mounted: () => {
+    // 初次挂载的时候计算一次
+    calculateWidth();
+  },
+  updated: () => {
+    // 数据更新时重新计算一次
+    calculateWidth();
+  },
+};
+
 const finalWidth = computed(() => {
-  return props.width || operationWidth.value || props.minWidth;
+  return props.minWidth || maxWidth.value;
 });
-
-// 自适应宽度指令
-const vAutoWidth = {
-  mounted() {
-    // 初次挂载的时候计算一�?
-    calculateWidth();
-  },
-  updated() {
-    // 数据更新时重新计算一�?
-    calculateWidth();
-  },
-};
-
-/**
- * 获取按钮数量和宽带来获取操作组的最大宽�?
- * 注意使用时需要使�?`class="operation-buttons"` 的标签包裹操作按�?
- * @returns {number} 返回操作组的最大宽�?
- */
-const getOperationMaxWidth = () => {
-  const el = document.getElementsByClassName("operation-buttons");
-
-  // 取操作组的最大宽�?
-  let maxWidth = 0;
-  let totalWidth: any = 0;
-  Array.prototype.forEach.call(el, (item) => {
-    // 获取每个item的dom
-    const buttons = item.querySelectorAll(".el-button");
-    // 获取每行按钮的总宽�?
-    totalWidth = Array.from(buttons).reduce((acc, button: any) => {
-      return acc + button.scrollWidth + 22; // 每个按钮的宽度加上预留宽�?
-    }, 0);
-
-    // 获取最大的宽度
-    if (totalWidth > maxWidth) maxWidth = totalWidth;
-  });
-
-  return maxWidth;
-};
 </script>

From f41df4a81131e0d6390d98b8d06cce4bca227427 Mon Sep 17 00:00:00 2001
From: XFeng <wxfengg@qq.com>
Date: Tue, 13 Jan 2026 19:45:34 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix(test):=20=F0=9F=94=A8=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=20vitest=20=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95=E8=BF=90?=
 =?UTF-8?q?=E8=A1=8C=E6=8A=A5=E9=94=99=E7=AD=89=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 tests/setup.ts 中添加 __APP_INFO__ 全局 mock
- 在 vitest.config.ts 中配置 AutoImport 插件以支持 Vue API 自动导入
---
 tests/setup.ts   |  8 ++++++++
 vitest.config.ts | 18 +++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/tests/setup.ts b/tests/setup.ts
index 2f1d5596..f1928975 100644
--- a/tests/setup.ts
+++ b/tests/setup.ts
@@ -41,6 +41,14 @@ global.ResizeObserver = class ResizeObserver {
 // Mock Element.scrollIntoView
 Element.prototype.scrollIntoView = vi.fn();
 
+// Mock __APP_INFO__
+(globalThis as any).__APP_INFO__ = {
+  pkg: {
+    name: "vue3-element-admin",
+    version: "4.0.0",
+  },
+};
+
 // Mock console methods to reduce noise in tests
 global.console = {
   ...console,
diff --git a/vitest.config.ts b/vitest.config.ts
index 5963d8c9..391e3f6f 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,9 +1,25 @@
 import { defineConfig } from "vitest/config";
 import vue from "@vitejs/plugin-vue";
 import { resolve } from "path";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    // API 自动导入
+    AutoImport({
+      imports: ["vue", "@vueuse/core", "pinia", "vue-router", "vue-i18n"],
+      resolvers: [ElementPlusResolver()],
+      dts: false,
+    }),
+    // 组件自动导入
+    Components({
+      resolvers: [ElementPlusResolver()],
+      dts: false,
+    }),
+  ],
   test: {
     // 使用 happy-dom 作为测试环境（比 jsdom 快）
     environment: "happy-dom",

From 3bae086c32139a9b2f65ebaa4867684a64db38bb Mon Sep 17 00:00:00 2001
From: XFeng <wxfengg@qq.com>
Date: Tue, 13 Jan 2026 19:50:40 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=F0=9F=8E=89=E6=96=B0=E5=A2=9E=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=88=87=E6=8D=A2=E5=8A=A8=E7=94=BB=20?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 实现了在项目配置中可配置页面切换动画
- 编写 页面切换动画 功能单元测试
---
 src/constants/index.ts                    |  1 +
 src/enums/settings.ts                     | 28 +++++++++++++
 src/lang/package/en.json                  |  5 +++
 src/lang/package/zh-cn.json               |  5 +++
 src/layouts/components/LayoutMain.vue     | 51 ++++++++++++++++++-----
 src/layouts/components/LayoutSettings.vue | 17 +++++++-
 src/settings.ts                           |  1 +
 src/store/modules/settings.ts             |  6 +++
 tests/unit/store/settings.test.ts         | 34 +++++++++++++++
 9 files changed, 137 insertions(+), 11 deletions(-)

diff --git a/src/constants/index.ts b/src/constants/index.ts
index d448bd3c..57f1e1f5 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -42,6 +42,7 @@ export const STORAGE_KEYS = {
   SHOW_TAGS_VIEW: `${APP_PREFIX}:ui:show_tags_view`,
   SHOW_APP_LOGO: `${APP_PREFIX}:ui:show_app_logo`,
   SHOW_WATERMARK: `${APP_PREFIX}:ui:show_watermark`,
+  PAGE_SWITCHING_ANIMATION: `${APP_PREFIX}:ui:page_switching_animation`,
   ENABLE_AI_ASSISTANT: `${APP_PREFIX}:ui:enable_ai_assistant`,
   LAYOUT: `${APP_PREFIX}:ui:layout`,
   SIDEBAR_COLOR_SCHEME: `${APP_PREFIX}:ui:sidebar_color_scheme`,
diff --git a/src/enums/settings.ts b/src/enums/settings.ts
index 7ba9b62b..f516db8a 100644
--- a/src/enums/settings.ts
+++ b/src/enums/settings.ts
@@ -121,3 +121,31 @@ export const enum DeviceEnum {
    */
   MOBILE = "mobile",
 }
+
+/**
+ * 页面切换动画枚举
+ */
+export const enum PageSwitchingAnimationEnum {
+  /**
+   * 无动画
+   */
+  NONE = "none",
+  /**
+   * 淡入淡出
+   */
+  FADE = "fade",
+  /**
+   * 平滑切换
+   */
+  FADE_SLIDE = "fade-slide",
+  /**
+   * 缩放切换
+   */
+  FADE_SCALE = "fade-scale",
+}
+export const PageSwitchingAnimationOptions: Record<string, OptionItem> = {
+  none: { value: "none", label: "无动画" },
+  fade: { value: "fade", label: "淡入淡出" },
+  "fade-slide": { value: "fade-slide", label: "平滑切换" },
+  "fade-scale": { value: "fade-scale", label: "缩放切换" },
+};
diff --git a/src/lang/package/en.json b/src/lang/package/en.json
index 86cede1e..dd548b3b 100644
--- a/src/lang/package/en.json
+++ b/src/lang/package/en.json
@@ -72,6 +72,11 @@
     "showAppLogo": "Show App Logo",
     "sidebarColorScheme": "Sidebar Color Scheme",
     "showWatermark": "Show Watermark",
+    "pageSwitchingAnimation": "Page Switching Animation",
+    "none": "None",
+    "fade": "Fade",
+    "fade-slide": "Fade Slide",
+    "fade-scale": "Fade Scale",
     "classicBlue": "Classic Blue",
     "minimalWhite": "Minimal White",
     "copyConfig": "Copy Config",
diff --git a/src/lang/package/zh-cn.json b/src/lang/package/zh-cn.json
index fd2f8da1..8063b64c 100644
--- a/src/lang/package/zh-cn.json
+++ b/src/lang/package/zh-cn.json
@@ -75,6 +75,11 @@
     "showTagsView": "显示页签",
     "showAppLogo": "显示Logo",
     "showWatermark": "显示水印",
+    "pageSwitchingAnimation": "页面切换动画",
+    "none": "无动画",
+    "fade": "淡入淡出",
+    "fade-slide": "平滑切换",
+    "fade-scale": "缩放切换",
     "classicBlue": "经典蓝",
     "minimalWhite": "极简白",
     "copyConfig": "复制配置",
diff --git a/src/layouts/components/LayoutMain.vue b/src/layouts/components/LayoutMain.vue
index 2ab669b6..7afc9190 100644
--- a/src/layouts/components/LayoutMain.vue
+++ b/src/layouts/components/LayoutMain.vue
@@ -2,7 +2,7 @@
   <section class="app-main" :style="{ height: appMainHeight }">
     <router-view>
       <template #default="{ Component, route }">
-        <transition enter-active-class="animate__animated animate__fadeIn" mode="out-in">
+        <transition :name="transitionName" mode="out-in">
           <keep-alive :include="cachedViews">
             <component :is="currentComponent(Component, route)" :key="route.fullPath" />
           </keep-alive>
@@ -25,6 +25,8 @@ import Error404 from "@/views/error/404.vue";
 
 const { cachedViews } = toRefs(useTagsViewStore());
 
+const settingsStore = useSettingsStore();
+
 // 当前组件
 const wrapperMap = new Map<string, Component>();
 const currentComponent = (component: Component, route: RouteLocationNormalized) => {
@@ -60,12 +62,17 @@ const currentComponent = (component: Component, route: RouteLocationNormalized)
 };
 
 const appMainHeight = computed(() => {
-  if (useSettingsStore().showTagsView) {
+  if (settingsStore.showTagsView) {
     return `calc(100vh - ${variables["navbar-height"]} - ${variables["tags-view-height"]})`;
   } else {
     return `calc(100vh - ${variables["navbar-height"]})`;
   }
 });
+
+// 页面切换动画名称
+const transitionName = computed(() => {
+  return settingsStore.pageSwitchingAnimation ?? "";
+});
 </script>
 
 <style lang="scss" scoped>
@@ -74,18 +81,42 @@ const appMainHeight = computed(() => {
   overflow-y: auto;
   background-color: var(--el-bg-color-page);
 
-  /* 布局切换动画优化 */
-  &.animate__animated {
-    animation-duration: 0.4s;
-    animation-fill-mode: forwards;
+  /* fade */
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.3s ease-in-out;
+  }
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
   }
 
-  &.animate__fadeOut {
-    animation-timing-function: ease-in;
+  /* 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);
   }
 
-  &.animate__fadeIn {
-    animation-timing-function: ease-out;
+  /* 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);
   }
 }
 </style>
diff --git a/src/layouts/components/LayoutSettings.vue b/src/layouts/components/LayoutSettings.vue
index 3d6fab1b..a96fe77f 100644
--- a/src/layouts/components/LayoutSettings.vue
+++ b/src/layouts/components/LayoutSettings.vue
@@ -49,6 +49,18 @@
           <el-switch v-model="settingsStore.showWatermark" />
         </div>
 
+        <div class="config-item flex-x-between">
+          <span class="text-xs">{{ t("settings.pageSwitchingAnimation") }}</span>
+          <el-select v-model="settingsStore.pageSwitchingAnimation" style="width: 150px">
+            <el-option
+              v-for="(item, key) in pageSwitchingAnimationOptions"
+              :key
+              :label="t(`settings.${item.value}`)"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+
         <div class="config-item flex-x-between">
           <span class="text-xs">灰色模式</span>
           <el-switch v-model="settingsStore.grayMode" />
@@ -159,10 +171,13 @@
 import { DocumentCopy, RefreshLeft, Check } from "@element-plus/icons-vue";
 
 const { t } = useI18n();
-import { LayoutMode, SidebarColor, ThemeMode } from "@/enums";
+import { LayoutMode, PageSwitchingAnimationOptions, SidebarColor, ThemeMode } from "@/enums";
 import { useSettingsStore } from "@/store";
 import { themeColorPresets, appConfig } from "@/settings";
 
+// 页面切换动画选项
+const pageSwitchingAnimationOptions: Record<string, OptionItem> = PageSwitchingAnimationOptions;
+
 // 按钮图标
 const copyIcon = markRaw(DocumentCopy);
 const resetIcon = markRaw(RefreshLeft);
diff --git a/src/settings.ts b/src/settings.ts
index ba55b636..d9bd4949 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -34,6 +34,7 @@ export const defaults = {
   showTagsView: true,
   showAppLogo: true,
   showWatermark: false,
+  pageSwitchingAnimation: "fade-slide",
   showSettings: true,
   watermarkContent: pkg.name,
 } as const;
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 1a1d986d..cfdcd9e7 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -10,6 +10,10 @@ export const useSettingsStore = defineStore("setting", () => {
   const showTagsView = useStorage(STORAGE_KEYS.SHOW_TAGS_VIEW, defaults.showTagsView);
   const showAppLogo = useStorage(STORAGE_KEYS.SHOW_APP_LOGO, defaults.showAppLogo);
   const showWatermark = useStorage(STORAGE_KEYS.SHOW_WATERMARK, defaults.showWatermark);
+  const pageSwitchingAnimation = useStorage(
+    STORAGE_KEYS.PAGE_SWITCHING_ANIMATION,
+    defaults.pageSwitchingAnimation
+  );
 
   // 布局
   const layout = useStorage<LayoutMode>(STORAGE_KEYS.LAYOUT, defaults.layout as LayoutMode);
@@ -66,6 +70,7 @@ export const useSettingsStore = defineStore("setting", () => {
     showTagsView.value = defaults.showTagsView;
     showAppLogo.value = defaults.showAppLogo;
     showWatermark.value = defaults.showWatermark;
+    pageSwitchingAnimation.value = defaults.pageSwitchingAnimation;
     userEnableAi.value = false;
     grayMode.value = false;
     colorWeak.value = false;
@@ -80,6 +85,7 @@ export const useSettingsStore = defineStore("setting", () => {
     showTagsView,
     showAppLogo,
     showWatermark,
+    pageSwitchingAnimation,
     enableAiAssistant,
     userEnableAi,
     grayMode,
diff --git a/tests/unit/store/settings.test.ts b/tests/unit/store/settings.test.ts
index 269318c1..622ebdf8 100644
--- a/tests/unit/store/settings.test.ts
+++ b/tests/unit/store/settings.test.ts
@@ -160,6 +160,38 @@ describe("useSettingsStore", () => {
     });
   });
 
+  describe("页面切换动画", () => {
+    it("应该修改页面切换动画", () => {
+      const store = useSettingsStore();
+
+      store.pageSwitchingAnimation = "fade";
+      expect(store.pageSwitchingAnimation).toBe("fade");
+
+      store.pageSwitchingAnimation = "fade-slide";
+      expect(store.pageSwitchingAnimation).toBe("fade-slide");
+
+      store.pageSwitchingAnimation = "fade-scale";
+      expect(store.pageSwitchingAnimation).toBe("fade-scale");
+
+      store.pageSwitchingAnimation = "none";
+      expect(store.pageSwitchingAnimation).toBe("none");
+    });
+
+    it("应该持久化页面切换动画设置", () => {
+      const store = useSettingsStore();
+      store.pageSwitchingAnimation = "fade-scale";
+
+      const newStore = useSettingsStore();
+      expect(newStore.pageSwitchingAnimation).toBe("fade-scale");
+    });
+
+    it("应该使用默认的页面切换动画", () => {
+      const store = useSettingsStore();
+      // 默认值应该是 "fade-slide"
+      expect(store.pageSwitchingAnimation).toBe("fade-slide");
+    });
+  });
+
   describe("重置设置", () => {
     it("应该重置所有设置为默认值", () => {
       const store = useSettingsStore();
@@ -168,6 +200,7 @@ describe("useSettingsStore", () => {
       store.showTagsView = false;
       store.showAppLogo = false;
       store.showWatermark = false;
+      store.pageSwitchingAnimation = "fade-slide";
       store.userEnableAi = true;
       store.grayMode = true;
       store.colorWeak = true;
@@ -181,6 +214,7 @@ describe("useSettingsStore", () => {
       expect(store.userEnableAi).toBe(false);
       expect(store.grayMode).toBe(false);
       expect(store.colorWeak).toBe(false);
+      expect(store.pageSwitchingAnimation).toBe("fade-slide");
     });
   });
 });