chore(projects): merge main to v1.1.0

2025-09-24 07:49:47 +08:00 · 2024-05-05 01:34:24 +08:00
parent 1ed2eb5fdd a6b92103a6
commit ebe55af7d5
46 changed files with 1330 additions and 1108 deletions
--- a/src/components/advanced/table-header-operation.vue
+++ b/src/components/advanced/table-header-operation.vue
@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { $t } from '@/locales';
+
 defineOptions({
  name: 'TableHeaderOperation'
 });
--- a/src/components/common/menu-toggler.vue
+++ b/src/components/common/menu-toggler.vue
@ -36,7 +36,11 @@ const icon = computed(() => {
 </script>

 <template>
-  <ButtonIcon :tooltip-content="collapsed ? $t('icon.expand') : $t('icon.collapse')" tooltip-placement="bottom-start">
+  <ButtonIcon
+    :tooltip-content="collapsed ? $t('icon.expand') : $t('icon.collapse')"
+    tooltip-placement="bottom-start"
+    :z-index="99"
+  >
    <SvgIcon :icon="icon" />
  </ButtonIcon>
 </template>
--- a/src/components/common/pin-toggler.vue
+++ b/src/components/common/pin-toggler.vue
@ -15,7 +15,7 @@ const icon = computed(() => (props.pin ? 'mdi-pin-off' : 'mdi-pin'));

 <template>
  <ButtonIcon
-    :tooltip-content="pin ? $t('icon.pin') : $t('icon.unpin')"
+    :tooltip-content="pin ? $t('icon.unpin') : $t('icon.pin')"
    tooltip-placement="bottom-start"
    :z-index="100"
  >
--- a/src/hooks/common/table.ts
+++ b/src/hooks/common/table.ts
@ -1,6 +1,7 @@
 import { computed, effectScope, onScopeDispose, reactive, ref, watch } from 'vue';
 import type { Ref } from 'vue';
 import type { PaginationProps } from 'naive-ui';
+import { cloneDeep } from 'lodash-es';
 import { useBoolean, useHookTable } from '@sa/hooks';
 import { useAppStore } from '@/store/modules/app';
 import { $t } from '@/locales';
@ -194,7 +195,8 @@ export function useTableOperate<T extends TableData = TableData>(data: Ref<T[]>,

  function handleEdit(id: T['id']) {
    operateType.value = 'edit';
-    editingData.value = data.value.find(item => item.id === id) || null;
+    const findItem = data.value.find(item => item.id === id) || null;
+    editingData.value = cloneDeep(findItem);

    openDrawer();
  }
--- a/src/layouts/base-layout/index.vue
+++ b/src/layouts/base-layout/index.vue
@ -18,6 +18,7 @@ defineOptions({

 const appStore = useAppStore();
 const themeStore = useThemeStore();
+const { menus } = setupMixMenuContext();

 const layoutMode = computed(() => {
  const vertical: LayoutMode = 'vertical';
@ -65,7 +66,7 @@ function getSiderWidth() {

  let w = isVerticalMix.value || isHorizontalMix.value ? mixWidth : width;

-  if (isVerticalMix.value && appStore.mixSiderFixed) {
+  if (isVerticalMix.value && appStore.mixSiderFixed && menus.value.length) {
    w += mixChildMenuWidth;
  }

@ -77,14 +78,12 @@ function getSiderCollapsedWidth() {

  let w = isVerticalMix.value || isHorizontalMix.value ? mixCollapsedWidth : collapsedWidth;

-  if (isVerticalMix.value && appStore.mixSiderFixed) {
+  if (isVerticalMix.value && appStore.mixSiderFixed && menus.value.length) {
    w += mixChildMenuWidth;
  }

  return w;
 }
-
-setupMixMenuContext();
 </script>

 <template>
--- a/src/layouts/context/index.ts
+++ b/src/layouts/context/index.ts
@ -1,4 +1,47 @@
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import { useContext } from '@sa/hooks';
-import { useMixMenu } from '../hooks';
+import { useRouteStore } from '@/store/modules/route';

 export const { setupStore: setupMixMenuContext, useStore: useMixMenuContext } = useContext('mix-menu', useMixMenu);
+
+function useMixMenu() {
+  const route = useRoute();
+  const routeStore = useRouteStore();
+
+  const activeFirstLevelMenuKey = ref('');
+
+  function setActiveFirstLevelMenuKey(key: string) {
+    activeFirstLevelMenuKey.value = key;
+  }
+
+  function getActiveFirstLevelMenuKey() {
+    const { hideInMenu, activeMenu } = route.meta;
+    const name = route.name as string;
+
+    const routeName = (hideInMenu ? activeMenu : name) || name;
+
+    const [firstLevelRouteName] = routeName.split('_');
+
+    setActiveFirstLevelMenuKey(firstLevelRouteName);
+  }
+
+  const menus = computed(
+    () => routeStore.menus.find(menu => menu.key === activeFirstLevelMenuKey.value)?.children || []
+  );
+
+  watch(
+    () => route.name,
+    () => {
+      getActiveFirstLevelMenuKey();
+    },
+    { immediate: true }
+  );
+
+  return {
+    activeFirstLevelMenuKey,
+    setActiveFirstLevelMenuKey,
+    getActiveFirstLevelMenuKey,
+    menus
+  };
+}
--- a/src/layouts/hooks/index.ts
+++ b/src/layouts/hooks/index.ts
@ -1,44 +0,0 @@
-import { computed, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { useRouteStore } from '@/store/modules/route';
-
-export function useMixMenu() {
-  const route = useRoute();
-  const routeStore = useRouteStore();
-
-  const activeFirstLevelMenuKey = ref('');
-
-  function setActiveFirstLevelMenuKey(key: string) {
-    activeFirstLevelMenuKey.value = key;
-  }
-
-  function getActiveFirstLevelMenuKey() {
-    const { hideInMenu, activeMenu } = route.meta;
-    const name = route.name as string;
-
-    const routeName = (hideInMenu ? activeMenu : name) || name;
-
-    const [firstLevelRouteName] = routeName.split('_');
-
-    setActiveFirstLevelMenuKey(firstLevelRouteName);
-  }
-
-  const menus = computed(
-    () => routeStore.menus.find(menu => menu.key === activeFirstLevelMenuKey.value)?.children || []
-  );
-
-  watch(
-    () => route.name,
-    () => {
-      getActiveFirstLevelMenuKey();
-    },
-    { immediate: true }
-  );
-
-  return {
-    activeFirstLevelMenuKey,
-    setActiveFirstLevelMenuKey,
-    getActiveFirstLevelMenuKey,
-    menus
-  };
-}
--- a/src/layouts/modules/global-menu/vertical-mix-menu.vue
+++ b/src/layouts/modules/global-menu/vertical-mix-menu.vue
@ -2,10 +2,10 @@
 import { computed } from 'vue';
 import { useBoolean } from '@sa/hooks';
 import { useAppStore } from '@/store/modules/app';
-import { useRouteStore } from '@/store/modules/route';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
-import { useMixMenu } from '../../hooks';
+import { $t } from '@/locales';
+import { useMixMenuContext } from '../../context';
 import FirstLevelMenu from './first-level-menu.vue';
 import BaseMenu from './base-menu.vue';

@ -15,16 +15,15 @@ defineOptions({

 const appStore = useAppStore();
 const themeStore = useThemeStore();
-const routeStore = useRouteStore();
 const { routerPushByKey } = useRouterPush();
 const { bool: drawerVisible, setBool: setDrawerVisible } = useBoolean();
-const { activeFirstLevelMenuKey, setActiveFirstLevelMenuKey, getActiveFirstLevelMenuKey } = useMixMenu();
+const { menus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey, getActiveFirstLevelMenuKey } = useMixMenuContext();

 const siderInverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);

-const menus = computed(() => routeStore.menus.find(menu => menu.key === activeFirstLevelMenuKey.value)?.children || []);
+const hasMenus = computed(() => menus.value.length > 0);

-const showDrawer = computed(() => (drawerVisible.value && menus.value.length) || appStore.mixSiderFixed);
+const showDrawer = computed(() => hasMenus.value && (drawerVisible.value || appStore.mixSiderFixed));

 function handleSelectMixMenu(menu: App.Global.Menu) {
  setActiveFirstLevelMenuKey(menu.key);
@ -49,7 +48,7 @@ function handleResetActiveMenu() {
    </FirstLevelMenu>
    <div
      class="relative h-full transition-width-300"
-      :style="{ width: appStore.mixSiderFixed ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
+      :style="{ width: appStore.mixSiderFixed && hasMenus ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
    >
      <DarkModeContainer
        class="absolute-lt h-full flex-col-stretch nowrap-hidden shadow-sm transition-all-300"
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@ -140,7 +140,16 @@ const local: App.I18n.Schema = {
    403: 'No Permission',
    404: 'Page Not Found',
    500: 'Server Error',
+    'iframe-page': 'Iframe',
    home: 'Home',
+    document: 'Document',
+    document_project: 'Project Document',
+    'document_project-link': 'Project Document(External Link)',
+    document_vue: 'Vue Document',
+    document_vite: 'Vite Document',
+    document_unocss: 'UnoCSS Document',
+    document_naive: 'Naive UI Document',
+    document_antd: 'Ant Design Vue Document',
    'user-center': 'User Center',
    about: 'About',
    function: 'System Function',
@ -218,7 +227,7 @@ const local: App.I18n.Schema = {
    },
    about: {
      title: 'About',
-      introduction: `Soybean Admin is an elegant and powerful admin template, based on the latest front-end technology stack, including Vue3, Vite5, TypeScript, Pinia and UnoCSS. It has built-in rich theme configuration and components, strict code specifications, and an automated file routing system. In addition, it also uses the online mock data solution based on ApiFox. Soybean Admin provides you with a one-stop admin solution, no additional configuration, and out of the box. It is also a best practice for learning cutting-edge technologies quickly.`,
+      introduction: `SoybeanAdmin is an elegant and powerful admin template, based on the latest front-end technology stack, including Vue3, Vite5, TypeScript, Pinia and UnoCSS. It has built-in rich theme configuration and components, strict code specifications, and an automated file routing system. In addition, it also uses the online mock data solution based on ApiFox. SoybeanAdmin provides you with a one-stop admin solution, no additional configuration, and out of the box. It is also a best practice for learning cutting-edge technologies quickly.`,
      projectInfo: {
        title: 'Project Info',
        version: 'Version',
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@ -140,7 +140,16 @@ const local: App.I18n.Schema = {
    403: '无权限',
    404: '页面不存在',
    500: '服务器错误',
+    'iframe-page': '外链页面',
    home: '首页',
+    document: '文档',
+    document_project: '项目文档',
+    'document_project-link': '项目文档(外链)',
+    document_vue: 'Vue文档',
+    document_vite: 'Vite文档',
+    document_unocss: 'UnoCSS文档',
+    document_naive: 'Naive UI文档',
+    document_antd: 'Ant Design Vue文档',
    'user-center': '个人中心',
    about: '关于',
    function: '系统功能',
@ -218,7 +227,7 @@ const local: App.I18n.Schema = {
    },
    about: {
      title: '关于',
-      introduction: `Soybean Admin 是一个优雅且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。此外，它还采用了基于 ApiFox 的在线Mock数据方案。Soybean Admin 为您提供了一站式的后台管理解决方案，无需额外配置，开箱即用。同样是一个快速学习前沿技术的最佳实践。`,
+      introduction: `SoybeanAdmin 是一个优雅且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。此外，它还采用了基于 ApiFox 的在线Mock数据方案。SoybeanAdmin 为您提供了一站式的后台管理解决方案，无需额外配置，开箱即用。同样是一个快速学习前沿技术的最佳实践。`,
      projectInfo: {
        title: '项目信息',
        version: '版本',
--- a/src/router/elegant/imports.ts
+++ b/src/router/elegant/imports.ts
@ -18,6 +18,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
  403: () => import("@/views/_builtin/403/index.vue"),
  404: () => import("@/views/_builtin/404/index.vue"),
  500: () => import("@/views/_builtin/500/index.vue"),
+  "iframe-page": () => import("@/views/_builtin/iframe-page/[url].vue"),
  login: () => import("@/views/_builtin/login/index.vue"),
  about: () => import("@/views/about/index.vue"),
  "function_hide-child_one": () => import("@/views/function/hide-child/one/index.vue"),
--- a/src/router/elegant/routes.ts
+++ b/src/router/elegant/routes.ts
@ -179,6 +179,19 @@ export const generatedRoutes: GeneratedRoute[] = [
      order: 1
    }
  },
+  {
+    name: 'iframe-page',
+    path: '/iframe-page/:url',
+    component: 'layout.base$view.iframe-page',
+    props: true,
+    meta: {
+      title: 'iframe-page',
+      i18nKey: 'route.iframe-page',
+      constant: true,
+      hideInMenu: true,
+      keepAlive: true
+    }
+  },
  {
    name: 'login',
    path: '/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?',
--- a/src/router/elegant/transform.ts
+++ b/src/router/elegant/transform.ts
@ -147,6 +147,14 @@ const routeMap: RouteMap = {
  "exception_403": "/exception/403",
  "exception_404": "/exception/404",
  "exception_500": "/exception/500",
+  "document": "/document",
+  "document_project": "/document/project",
+  "document_project-link": "/document/project-link",
+  "document_vue": "/document/vue",
+  "document_vite": "/document/vite",
+  "document_unocss": "/document/unocss",
+  "document_naive": "/document/naive",
+  "document_antd": "/document/antd",
  "403": "/403",
  "404": "/404",
  "500": "/500",
@ -162,6 +170,7 @@ const routeMap: RouteMap = {
  "function_tab": "/function/tab",
  "function_toggle-auth": "/function/toggle-auth",
  "home": "/home",
+  "iframe-page": "/iframe-page/:url",
  "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",
  "manage": "/manage",
  "manage_menu": "/manage/menu",
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@ -51,6 +51,115 @@ const customRoutes: CustomRoute[] = [
        }
      }
    ]
+  },
+  {
+    name: 'document',
+    path: '/document',
+    component: 'layout.base',
+    meta: {
+      title: 'document',
+      i18nKey: 'route.document',
+      order: 2,
+      icon: 'mdi:file-document-multiple-outline'
+    },
+    children: [
+      {
+        name: 'document_antd',
+        path: '/document/antd',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://antdv.com/components/overview-cn'
+        },
+        meta: {
+          title: 'document_antd',
+          i18nKey: 'route.document_antd',
+          order: 7,
+          icon: 'logos:ant-design'
+        }
+      },
+      {
+        name: 'document_naive',
+        path: '/document/naive',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://www.naiveui.com/zh-CN/os-theme/docs/introduction'
+        },
+        meta: {
+          title: 'document_naive',
+          i18nKey: 'route.document_naive',
+          order: 6,
+          icon: 'logos:naiveui'
+        }
+      },
+      {
+        name: 'document_project',
+        path: '/document/project',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://docs.soybeanjs.cn/zh'
+        },
+        meta: {
+          title: 'document_project',
+          i18nKey: 'route.document_project',
+          order: 1,
+          localIcon: 'logo'
+        }
+      },
+      {
+        name: 'document_project-link',
+        path: '/document/project-link',
+        component: 'view.iframe-page',
+        meta: {
+          title: 'document_project-link',
+          i18nKey: 'route.document_project-link',
+          order: 2,
+          localIcon: 'logo',
+          href: 'https://docs.soybeanjs.cn/zh'
+        }
+      },
+      {
+        name: 'document_unocss',
+        path: '/document/unocss',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://unocss.dev/'
+        },
+        meta: {
+          title: 'document_unocss',
+          i18nKey: 'route.document_unocss',
+          order: 5,
+          icon: 'logos:unocss'
+        }
+      },
+      {
+        name: 'document_vite',
+        path: '/document/vite',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://cn.vitejs.dev/'
+        },
+        meta: {
+          title: 'document_vite',
+          i18nKey: 'route.document_vite',
+          order: 4,
+          icon: 'logos:vitejs'
+        }
+      },
+      {
+        name: 'document_vue',
+        path: '/document/vue',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://cn.vuejs.org/'
+        },
+        meta: {
+          title: 'document_vue',
+          i18nKey: 'route.document_vue',
+          order: 3,
+          icon: 'logos:vue'
+        }
+      }
+    ]
  }
 ];

--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@ -1,6 +1,6 @@
-import { effectScope, onScopeDispose, ref, watch } from 'vue';
+import { effectScope, nextTick, onScopeDispose, ref, watch } from 'vue';
 import { defineStore } from 'pinia';
-import { breakpointsTailwind, useBreakpoints, useTitle } from '@vueuse/core';
+import { breakpointsTailwind, useBreakpoints, useEventListener, useTitle } from '@vueuse/core';
 import { useBoolean } from '@sa/hooks';
 import { SetupStoreId } from '@/enum';
 import { router } from '@/router';
@ -22,7 +22,11 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
  const { bool: fullContent, toggle: toggleFullContent } = useBoolean();
  const { bool: contentXScrollable, setBool: setContentXScrollable } = useBoolean();
  const { bool: siderCollapse, setBool: setSiderCollapse, toggle: toggleSiderCollapse } = useBoolean();
-  const { bool: mixSiderFixed, setBool: setMixSiderFixed, toggle: toggleMixSiderFixed } = useBoolean();
+  const {
+    bool: mixSiderFixed,
+    setBool: setMixSiderFixed,
+    toggle: toggleMixSiderFixed
+  } = useBoolean(localStg.get('mixSiderFixed') === 'Y');

  /** Is mobile layout */
  const isMobile = breakpoints.smaller('sm');
@ -83,9 +87,26 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
      isMobile,
      newValue => {
        if (newValue) {
-          setSiderCollapse(true);
+          // backup theme setting before is mobile
+          localStg.set('backupThemeSettingBeforeIsMobile', {
+            layout: themeStore.layout.mode,
+            siderCollapse: siderCollapse.value
+          });

          themeStore.setThemeLayout('vertical');
+          setSiderCollapse(true);
+        } else {
+          // when is not mobile, recover the backup theme setting
+          const backup = localStg.get('backupThemeSettingBeforeIsMobile');
+
+          if (backup) {
+            nextTick(() => {
+              themeStore.setThemeLayout(backup.layout);
+              setSiderCollapse(backup.siderCollapse);
+
+              localStg.remove('backupThemeSettingBeforeIsMobile');
+            });
+          }
        }
      },
      { immediate: true }
@ -107,6 +128,11 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
    });
  });

+  // cache mixSiderFixed
+  useEventListener(window, 'beforeunload', () => {
+    localStg.set('mixSiderFixed', mixSiderFixed.value ? 'Y' : 'N');
+  });
+
  /** On scope dispose */
  onScopeDispose(() => {
    scope.stop();
--- a/src/store/modules/tab/shared.ts
+++ b/src/store/modules/tab/shared.ts
@ -16,17 +16,24 @@ export function getAllTabs(tabs: App.Global.Tab[], homeTab?: App.Global.Tab) {

  const filterHomeTabs = tabs.filter(tab => tab.id !== homeTab.id);

-  const fixedTabs = filterHomeTabs
-    .filter(tab => tab.fixedIndex !== undefined)
-    .sort((a, b) => a.fixedIndex! - b.fixedIndex!);
+  const fixedTabs = filterHomeTabs.filter(isFixedTab).sort((a, b) => a.fixedIndex! - b.fixedIndex!);

-  const remainTabs = filterHomeTabs.filter(tab => tab.fixedIndex === undefined);
+  const remainTabs = filterHomeTabs.filter(tab => !isFixedTab(tab));

  const allTabs = [homeTab, ...fixedTabs, ...remainTabs];

  return updateTabsLabel(allTabs);
 }

+/**
+ * Is fixed tab
+ *
+ * @param tab
+ */
+function isFixedTab(tab: App.Global.Tab) {
+  return tab.fixedIndex !== undefined && tab.fixedIndex !== null;
+}
+
 /**
 * Get tab id by route
 *
@ -177,7 +184,7 @@ export function extractTabsByAllRoutes(router: Router, tabs: App.Global.Tab[]) {
 * @param tabs
 */
 export function getFixedTabs(tabs: App.Global.Tab[]) {
-  return tabs.filter(tab => tab.fixedIndex !== undefined);
+  return tabs.filter(isFixedTab);
 }

 /**
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@ -202,7 +202,7 @@ declare namespace App {
      /** The tab route full path */
      fullPath: string;
      /** The tab fixed index */
-      fixedIndex?: number;
+      fixedIndex?: number | null;
      /**
       * Tab icon
       *
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}

+/* prettier-ignore */
 declare module 'vue' {
  export interface GlobalComponents {
    AppProvider: typeof import('./../components/common/app-provider.vue')['default']
--- a/src/typings/elegant-router.d.ts
+++ b/src/typings/elegant-router.d.ts
@ -21,6 +21,14 @@ declare module "@elegant-router/types" {
    "exception_403": "/exception/403";
    "exception_404": "/exception/404";
    "exception_500": "/exception/500";
+    "document": "/document";
+    "document_project": "/document/project";
+    "document_project-link": "/document/project-link";
+    "document_vue": "/document/vue";
+    "document_vite": "/document/vite";
+    "document_unocss": "/document/unocss";
+    "document_naive": "/document/naive";
+    "document_antd": "/document/antd";
    "403": "/403";
    "404": "/404";
    "500": "/500";
@ -36,6 +44,7 @@ declare module "@elegant-router/types" {
    "function_tab": "/function/tab";
    "function_toggle-auth": "/function/toggle-auth";
    "home": "/home";
+    "iframe-page": "/iframe-page/:url";
    "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
    "manage": "/manage";
    "manage_menu": "/manage/menu";
@ -72,6 +81,14 @@ declare module "@elegant-router/types" {
    | "exception_403"
    | "exception_404"
    | "exception_500"
+    | "document"
+    | "document_project"
+    | "document_project-link"
+    | "document_vue"
+    | "document_vite"
+    | "document_unocss"
+    | "document_naive"
+    | "document_antd"
  >;

  /**
@ -90,6 +107,7 @@ declare module "@elegant-router/types" {
    | "about"
    | "function"
    | "home"
+    | "iframe-page"
    | "login"
    | "manage"
    | "multi-menu"
@ -104,6 +122,7 @@ declare module "@elegant-router/types" {
    | "root"
    | "not-found"
    | "exception"
+    | "document"
  >;

  /**
@ -114,6 +133,7 @@ declare module "@elegant-router/types" {
    | "403"
    | "404"
    | "500"
+    | "iframe-page"
    | "login"
    | "about"
    | "function_hide-child_one"
@ -144,6 +164,13 @@ declare module "@elegant-router/types" {
    | "exception_403"
    | "exception_404"
    | "exception_500"
+    | "document_project"
+    | "document_project-link"
+    | "document_vue"
+    | "document_vite"
+    | "document_unocss"
+    | "document_naive"
+    | "document_antd"
  >;

  /**
--- a/src/typings/router.d.ts
+++ b/src/typings/router.d.ts
@ -58,7 +58,7 @@ declare module 'vue-router' {
    /** By default, the same route path will use one tab, if set to true, it will use multiple tabs */
    multiTab?: boolean;
    /** If set, the route will be fixed in tabs, and the value is the order of fixed tabs */
-    fixedIndexInTab?: number;
+    fixedIndexInTab?: number | null;
    /** if set query parameters, it will be automatically carried when entering the route */
    query?: Record<string, string>;
  }
--- a/src/typings/storage.d.ts
+++ b/src/typings/storage.d.ts
@ -14,6 +14,8 @@ declare namespace StorageType {
    lang: App.I18n.LangType;
    /** The token */
    token: string;
+    /** Fixed sider with mix-menu */
+    mixSiderFixed: CommonType.YesOrNo;
    /** The refresh token */
    refreshToken: string;
    /** The user info */
@ -30,5 +32,10 @@ declare namespace StorageType {
    overrideThemeFlag: string;
    /** The global tabs */
    globalTabs: App.Global.Tab[];
+    /** The backup theme setting before is mobile */
+    backupThemeSettingBeforeIsMobile: {
+      layout: UnionKey.ThemeLayoutMode;
+      siderCollapse: boolean;
+    };
  }
 }
--- a/src/views/_builtin/iframe-page/[url].vue
+++ b/src/views/_builtin/iframe-page/[url].vue
@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { onActivated, onMounted } from 'vue';
+
+interface Props {
+  url: string;
+}
+
+defineProps<Props>();
+
+onMounted(() => {
+  console.log('mounted');
+});
+
+onActivated(() => {
+  console.log('activated');
+});
+</script>
+
+<template>
+  <div class="h-full">
+    <iframe id="iframePage" class="size-full" :src="url"></iframe>
+  </div>
+</template>
+
+<style scoped></style>
--- a/src/views/manage/menu/modules/menu-operate-drawer.vue
+++ b/src/views/manage/menu/modules/menu-operate-drawer.vue
@ -187,20 +187,18 @@ async function getRoleOptions() {
  }
 }

-function handleUpdateModel() {
-  if (props.operateType === 'add') {
-    Object.assign(model, createDefaultModel());
+function handleInitModel() {
+  Object.assign(model, createDefaultModel());

-    return;
-  }
+  if (!props.rowData) return;

-  if (props.operateType === 'addChild' && props.rowData) {
+  if (props.operateType === 'addChild') {
    const { id } = props.rowData;

-    Object.assign(model, createDefaultModel(), { parentId: id });
+    Object.assign(model, { parentId: id });
  }

-  if (props.operateType === 'edit' && props.rowData) {
+  if (props.operateType === 'edit') {
    const { component, query, ...rest } = props.rowData;

    const { layout, page } = getLayoutAndPage(component);
@ -233,7 +231,7 @@ async function handleSubmit() {

 watch(visible, () => {
  if (visible.value) {
-    handleUpdateModel();
+    handleInitModel();
    restoreValidation();
    getRoleOptions();
  }
@ -241,9 +239,9 @@ watch(visible, () => {
 </script>

 <template>
-  <NDrawer v-model:show="visible" display-directive="show" :width="400">
-    <NDrawerContent :title="title" :native-scrollbar="false" closable>
-      <NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="80">
+  <NModal v-model:show="visible" :title="title" preset="card" class="w-720px">
+    <NScrollbar class="h-400px">
+      <NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="100">
        <NGrid>
          <NFormItemGi span="12" :label="$t('page.manage.menu.menuType')" path="menuType">
            <NRadioGroup v-model:value="model.menuType" :disabled="disabledMenuType">
@ -384,14 +382,14 @@ watch(visible, () => {
          </NFormItemGi>
        </NGrid>
      </NForm>
-      <template #footer>
-        <NSpace :size="16">
-          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
-          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
-        </NSpace>
-      </template>
-    </NDrawerContent>
-  </NDrawer>
+    </NScrollbar>
+    <template #footer>
+      <NSpace justify="end" :size="16">
+        <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+        <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+      </NSpace>
+    </template>
+  </NModal>
 </template>

 <style scoped></style>
--- a/src/views/manage/role/modules/role-operate-drawer.vue
+++ b/src/views/manage/role/modules/role-operate-drawer.vue
@ -68,11 +68,8 @@ const roleId = computed(() => props.rowData?.id || -1);

 const isEdit = computed(() => props.operateType === 'edit');

-function handleUpdateModelWhenEdit() {
-  if (props.operateType === 'add') {
-    Object.assign(model, createDefaultModel());
-    return;
-  }
+function handleInitModel() {
+  Object.assign(model, createDefaultModel());

  if (props.operateType === 'edit' && props.rowData) {
    Object.assign(model, props.rowData);
@ -93,14 +90,14 @@ async function handleSubmit() {

 watch(visible, () => {
  if (visible.value) {
-    handleUpdateModelWhenEdit();
+    handleInitModel();
    restoreValidation();
  }
 });
 </script>

 <template>
-  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="360">
+  <NDrawer v-model:show="visible" display-directive="show" :width="360">
    <NDrawerContent :title="title" :native-scrollbar="false" closable>
      <NForm ref="formRef" :model="model" :rules="rules">
        <NFormItem :label="$t('page.manage.role.roleName')" path="roleName">
--- a/src/views/manage/user/modules/user-operate-drawer.vue
+++ b/src/views/manage/user/modules/user-operate-drawer.vue
@ -89,11 +89,8 @@ async function getRoleOptions() {
  }
 }

-function handleUpdateModelWhenEdit() {
-  if (props.operateType === 'add') {
-    Object.assign(model, createDefaultModel());
-    return;
-  }
+function handleInitModel() {
+  Object.assign(model, createDefaultModel());

  if (props.operateType === 'edit' && props.rowData) {
    Object.assign(model, props.rowData);
@ -114,7 +111,7 @@ async function handleSubmit() {

 watch(visible, () => {
  if (visible.value) {
-    handleUpdateModelWhenEdit();
+    handleInitModel();
    restoreValidation();
    getRoleOptions();
  }
@ -122,7 +119,7 @@ watch(visible, () => {
 </script>

 <template>
-  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="360">
+  <NDrawer v-model:show="visible" display-directive="show" :width="360">
    <NDrawerContent :title="title" :native-scrollbar="false" closable>
      <NForm ref="formRef" :model="model" :rules="rules">
        <NFormItem :label="$t('page.manage.user.userName')" path="userName">