多租户平台

2025-06-26 15:29:07 +08:00
commit 796acccf16
355 changed files with 27974 additions and 0 deletions
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@ -0,0 +1,102 @@
+<template>
+  <section class="app-main">
+    <router-view v-slot="{ Component, route }">
+      <transition v-if="!route.meta.noCache" :enter-active-class="animate" mode="out-in">
+        <keep-alive v-if="!route.meta.noCache" :include="tagsViewStore.cachedViews">
+          <component :is="Component" v-if="!route.meta.link" :key="route.path" />
+        </keep-alive>
+      </transition>
+      <transition v-if="route.meta.noCache" :enter-active-class="animate" mode="out-in">
+        <component :is="Component" v-if="!route.meta.link && route.meta.noCache" :key="route.path" />
+      </transition>
+    </router-view>
+    <iframe-toggle />
+  </section>
+</template>
+
+<script setup name="AppMain" lang="ts">
+import { useSettingsStore } from '@/store/modules/settings';
+import { useTagsViewStore } from '@/store/modules/tagsView';
+
+import IframeToggle from './IframeToggle/index.vue';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const route = useRoute();
+const tagsViewStore = useTagsViewStore();
+
+// 随机动画集合
+const animate = ref<string>('');
+const animationEnable = ref(useSettingsStore().animationEnable);
+watch(
+  () => useSettingsStore().animationEnable,
+  (val: boolean) => {
+    animationEnable.value = val;
+    if (val) {
+      animate.value = proxy?.animate.animateList[Math.round(Math.random() * proxy?.animate.animateList.length)] as string;
+    } else {
+      animate.value = proxy?.animate.defaultAnimate as string;
+    }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  addIframe();
+});
+
+watchEffect(() => {
+  addIframe();
+});
+
+function addIframe() {
+  if (route.meta.link) {
+    useTagsViewStore().addIframeView(route);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-main {
+  /* 50= navbar  50  */
+  min-height: calc(100vh - 50px);
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.fixed-header + .app-main {
+  padding-top: 50px;
+}
+
+.hasTagsView {
+  .app-main {
+    /* 84 = navbar + tags-view = 50 + 34 */
+    min-height: calc(100vh - 84px);
+  }
+
+  .fixed-header + .app-main {
+    padding-top: 84px;
+  }
+}
+</style>
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 6px;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #c0c0c0;
+  border-radius: 3px;
+}
+</style>
--- a/src/layout/components/IframeToggle/index.vue
+++ b/src/layout/components/IframeToggle/index.vue
@ -0,0 +1,28 @@
+<template>
+  <inner-link
+    v-for="(item, index) in tagsViewStore.iframeViews"
+    v-show="route.path === item.path"
+    :key="item.path"
+    :iframe-id="'iframe' + index"
+    :src="iframeUrl(item.meta ? item.meta.link : '', item.query)"
+  ></inner-link>
+</template>
+
+<script setup lang="ts">
+import InnerLink from '../InnerLink/index.vue';
+
+import { useTagsViewStore } from '@/store/modules/tagsView';
+
+const route = useRoute();
+const tagsViewStore = useTagsViewStore();
+
+function iframeUrl(url: string | undefined, query: any) {
+  if (Object.keys(query).length > 0) {
+    const params = Object.keys(query)
+      .map((key) => key + '=' + query[key])
+      .join('&');
+    return url + '?' + params;
+  }
+  return url;
+}
+</script>
--- a/src/layout/components/InnerLink/index.vue
+++ b/src/layout/components/InnerLink/index.vue
@ -0,0 +1,15 @@
+<template>
+  <div :style="'height:' + height">
+    <iframe :id="iframeId" style="width: 100%; height: 100%; border: 0" :src="src"></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
+const props = defineProps({
+  src: propTypes.string.def('/'),
+  iframeId: propTypes.string.isRequired
+});
+const height = ref(document.documentElement.clientHeight - 94.5 + 'px');
+</script>
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@ -0,0 +1,308 @@
+<template>
+  <div class="navbar">
+    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggle-click="toggleSideBar" />
+    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
+    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
+
+    <div class="right-menu flex align-center">
+      <template v-if="appStore.device !== 'mobile'">
+        <el-select
+          v-if="userId === 1 && tenantEnabled"
+          v-model="companyName"
+          class="min-w-244px"
+          clearable
+          filterable
+          reserve-keyword
+          :placeholder="proxy.$t('navbar.selectTenant')"
+          @change="dynamicTenantEvent"
+          @clear="dynamicClearEvent"
+        >
+          <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
+          <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
+        </el-select>
+
+        <search-menu ref="searchMenuRef" />
+        <el-tooltip content="搜索" effect="dark" placement="bottom">
+          <div class="right-menu-item hover-effect" @click="openSearchMenu">
+            <svg-icon class-name="search-icon" icon-class="search" />
+          </div>
+        </el-tooltip>
+        <!-- 消息 -->
+        <el-tooltip :content="proxy.$t('navbar.message')" effect="dark" placement="bottom">
+          <div>
+            <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
+              <template #reference>
+                <el-badge :value="newNotice > 0 ? newNotice : ''" :max="99">
+                  <div class="right-menu-item hover-effect" style="display: block"><svg-icon icon-class="message" /></div>
+                </el-badge>
+              </template>
+              <template #default>
+                <notice></notice>
+              </template>
+            </el-popover>
+          </div>
+        </el-tooltip>
+        <el-tooltip content="Github" effect="dark" placement="bottom">
+          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
+        </el-tooltip>
+
+        <el-tooltip :content="proxy.$t('navbar.document')" effect="dark" placement="bottom">
+          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
+        </el-tooltip>
+
+        <el-tooltip :content="proxy.$t('navbar.full')" effect="dark" placement="bottom">
+          <screenfull id="screenfull" class="right-menu-item hover-effect" />
+        </el-tooltip>
+
+        <el-tooltip :content="proxy.$t('navbar.language')" effect="dark" placement="bottom">
+          <lang-select id="lang-select" class="right-menu-item hover-effect" />
+        </el-tooltip>
+
+        <el-tooltip :content="proxy.$t('navbar.layoutSize')" effect="dark" placement="bottom">
+          <size-select id="size-select" class="right-menu-item hover-effect" />
+        </el-tooltip>
+      </template>
+      <div class="avatar-container">
+        <el-dropdown class="right-menu-item hover-effect" trigger="click" @command="handleCommand">
+          <div class="avatar-wrapper">
+            <img :src="userStore.avatar" class="user-avatar" />
+            <el-icon><caret-bottom /></el-icon>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <router-link v-if="!dynamic" to="/user/profile">
+                <el-dropdown-item>{{ proxy.$t('navbar.personalCenter') }}</el-dropdown-item>
+              </router-link>
+              <el-dropdown-item v-if="settingsStore.showSettings" command="setLayout">
+                <span>{{ proxy.$t('navbar.layoutSetting') }}</span>
+              </el-dropdown-item>
+              <el-dropdown-item divided command="logout">
+                <span>{{ proxy.$t('navbar.logout') }}</span>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SearchMenu from './TopBar/search.vue';
+import { useAppStore } from '@/store/modules/app';
+import { useUserStore } from '@/store/modules/user';
+import { useSettingsStore } from '@/store/modules/settings';
+import { useNoticeStore } from '@/store/modules/notice';
+import { getTenantList } from '@/api/login';
+import { dynamicClear, dynamicTenant } from '@/api/system/tenant';
+import { TenantVO } from '@/api/types';
+import notice from './notice/index.vue';
+import router from '@/router';
+import { ElMessageBoxOptions } from 'element-plus/es/components/message-box/src/message-box.type';
+
+const appStore = useAppStore();
+const userStore = useUserStore();
+const settingsStore = useSettingsStore();
+const noticeStore = storeToRefs(useNoticeStore());
+const newNotice = ref(<number>0);
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const userId = ref(userStore.userId);
+const companyName = ref(undefined);
+const tenantList = ref<TenantVO[]>([]);
+// 是否切换了租户
+const dynamic = ref(false);
+// 租户开关
+const tenantEnabled = ref(true);
+// 搜索菜单
+const searchMenuRef = ref<InstanceType<typeof SearchMenu>>();
+
+const openSearchMenu = () => {
+  searchMenuRef.value?.openSearch();
+};
+
+// 动态切换
+const dynamicTenantEvent = async (tenantId: string) => {
+  if (companyName.value != null && companyName.value !== '') {
+    await dynamicTenant(tenantId);
+    dynamic.value = true;
+    await proxy?.$router.push('/');
+    await proxy?.$tab.closeAllPage();
+    await proxy?.$tab.refreshPage();
+  }
+};
+
+const dynamicClearEvent = async () => {
+  await dynamicClear();
+  dynamic.value = false;
+  await proxy?.$router.push('/');
+  await proxy?.$tab.closeAllPage();
+  await proxy?.$tab.refreshPage();
+};
+
+/** 租户列表 */
+const initTenantList = async () => {
+  const { data } = await getTenantList(true);
+  tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled;
+  if (tenantEnabled.value) {
+    tenantList.value = data.voList;
+  }
+};
+
+defineExpose({
+  initTenantList
+});
+
+const toggleSideBar = () => {
+  appStore.toggleSideBar(false);
+};
+
+const logout = async () => {
+  await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  } as ElMessageBoxOptions);
+  userStore.logout().then(() => {
+    router.replace({
+      path: '/login',
+      query: {
+        redirect: encodeURIComponent(router.currentRoute.value.fullPath || '/')
+      }
+    });
+    proxy?.$tab.closeAllPage();
+  });
+};
+
+const emits = defineEmits(['setLayout']);
+const setLayout = () => {
+  emits('setLayout');
+};
+// 定义Command方法对象 通过key直接调用方法
+const commandMap: { [key: string]: any } = {
+  setLayout,
+  logout
+};
+const handleCommand = (command: string) => {
+  // 判断是否存在该方法
+  if (commandMap[command]) {
+    commandMap[command]();
+  }
+};
+//用深度监听 消息
+watch(
+  () => noticeStore.state.value.notices,
+  (newVal) => {
+    newNotice.value = newVal.filter((item: any) => !item.read).length;
+  },
+  { deep: true }
+);
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-select .el-input__wrapper) {
+  height: 30px;
+}
+
+:deep(.el-badge__content.is-fixed) {
+  top: 12px;
+}
+
+.flex {
+  display: flex;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.navbar {
+  height: 50px;
+  overflow: hidden;
+  position: relative;
+  //background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
+  .hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.025);
+    }
+  }
+
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .topmenu-container {
+    position: absolute;
+    left: 50px;
+  }
+
+  .errLog-container {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
+    display: flex;
+
+    &:focus {
+      outline: none;
+    }
+
+    .right-menu-item {
+      display: inline-block;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 18px;
+      color: #5a5e66;
+      vertical-align: text-bottom;
+
+      &.hover-effect {
+        cursor: pointer;
+        transition: background 0.3s;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.025);
+        }
+      }
+    }
+
+    .avatar-container {
+      margin-right: 40px;
+
+      .avatar-wrapper {
+        margin-top: 5px;
+        position: relative;
+
+        .user-avatar {
+          cursor: pointer;
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+          margin-top: 10px;
+        }
+
+        i {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+</style>
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@ -0,0 +1,246 @@
+<template>
+  <el-drawer v-model="showSettings" :with-header="false" direction="rtl" size="300px" close-on-click-modal>
+    <h3 class="drawer-title">主题风格设置</h3>
+
+    <div class="setting-drawer-block-checbox">
+      <div class="setting-drawer-block-checbox-item" @click="handleTheme(SideThemeEnum.DARK)">
+        <img src="@/assets/images/dark.svg" alt="dark" />
+        <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
+          <i aria-label="图标: check" class="anticon anticon-check">
+            <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
+              <path
+                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+              />
+            </svg>
+          </i>
+        </div>
+      </div>
+      <div class="setting-drawer-block-checbox-item" @click="handleTheme(SideThemeEnum.LIGHT)">
+        <img src="@/assets/images/light.svg" alt="light" />
+        <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
+          <i aria-label="图标: check" class="anticon anticon-check">
+            <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
+              <path
+                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+              />
+            </svg>
+          </i>
+        </div>
+      </div>
+    </div>
+    <div class="drawer-item">
+      <span>主题颜色</span>
+      <span class="comp-style">
+        <el-color-picker v-model="theme" :predefine="predefineColors" @change="themeChange" />
+      </span>
+    </div>
+    <div class="drawer-item">
+      <span>深色模式</span>
+      <span class="comp-style">
+        <el-switch v-model="isDark" class="drawer-switch" @change="toggleDark" />
+      </span>
+    </div>
+
+    <el-divider />
+
+    <h3 class="drawer-title">系统布局配置</h3>
+
+    <div class="drawer-item">
+      <span>开启 TopNav</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.topNav" class="drawer-switch" @change="topNavChange" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>开启 Tags-Views</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.tagsView" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>显示页签图标</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.tagsIcon" :disabled="!settingsStore.tagsView" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>固定 Header</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.fixedHeader" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>显示 Logo</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.sidebarLogo" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>动态标题</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.dynamicTitle" class="drawer-switch" @change="dynamicTitleChange" />
+      </span>
+    </div>
+
+    <el-divider />
+
+    <el-button type="primary" plain icon="DocumentAdd" @click="saveSetting">保存配置</el-button>
+    <el-button plain icon="Refresh" @click="resetSetting">重置配置</el-button>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { useDynamicTitle } from '@/utils/dynamicTitle';
+import { useAppStore } from '@/store/modules/app';
+import { useSettingsStore } from '@/store/modules/settings';
+import { usePermissionStore } from '@/store/modules/permission';
+import { handleThemeStyle } from '@/utils/theme';
+import { SideThemeEnum } from '@/enums/SideThemeEnum';
+import defaultSettings from '@/settings';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const appStore = useAppStore();
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
+
+const showSettings = ref(false);
+const theme = ref(settingsStore.theme);
+const sideTheme = ref(settingsStore.sideTheme);
+const storeSettings = computed(() => settingsStore);
+const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585']);
+
+// 是否暗黑模式
+const isDark = useDark({
+  storageKey: 'useDarkKey',
+  valueDark: 'dark',
+  valueLight: 'light'
+});
+// 匹配菜单颜色
+watch(isDark, () => {
+  if (isDark.value) {
+    settingsStore.sideTheme = SideThemeEnum.DARK;
+  } else {
+    settingsStore.sideTheme = sideTheme.value;
+  }
+});
+const toggleDark = () => useToggle(isDark);
+
+const topNavChange = (val: any) => {
+  if (!val) {
+    appStore.toggleSideBarHide(false);
+    permissionStore.setSidebarRouters(permissionStore.defaultRoutes as any);
+  }
+};
+
+const dynamicTitleChange = () => {
+  // 动态设置网页标题
+  useDynamicTitle();
+};
+
+const themeChange = (val: string) => {
+  settingsStore.theme = val;
+  handleThemeStyle(val);
+};
+const handleTheme = (val: string) => {
+  sideTheme.value = val;
+  if (isDark.value && val === SideThemeEnum.LIGHT) {
+    // 暗黑模式颜色不变
+    settingsStore.sideTheme = SideThemeEnum.DARK;
+    return;
+  }
+  settingsStore.sideTheme = val;
+};
+const saveSetting = () => {
+  proxy?.$modal.loading('正在保存到本地，请稍候...');
+  const settings = useStorage<LayoutSetting>('layout-setting', defaultSettings);
+  settings.value.topNav = storeSettings.value.topNav;
+  settings.value.tagsView = storeSettings.value.tagsView;
+  settings.value.tagsIcon = storeSettings.value.tagsIcon;
+  settings.value.fixedHeader = storeSettings.value.fixedHeader;
+  settings.value.sidebarLogo = storeSettings.value.sidebarLogo;
+  settings.value.dynamicTitle = storeSettings.value.dynamicTitle;
+  settings.value.sideTheme = storeSettings.value.sideTheme;
+  settings.value.theme = storeSettings.value.theme;
+  setTimeout(() => {
+    proxy?.$modal.closeLoading();
+  }, 1000);
+};
+const resetSetting = () => {
+  proxy?.$modal.loading('正在清除设置缓存并刷新，请稍候...');
+  useStorage<any>('layout-setting', null).value = null;
+  setTimeout('window.location.reload()', 1000);
+};
+const openSetting = () => {
+  showSettings.value = true;
+};
+
+defineExpose({
+  openSetting
+});
+</script>
+
+<style lang="scss" scoped>
+.setting-drawer-title {
+  margin-bottom: 12px;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 22px;
+  font-weight: bold;
+  .drawer-title {
+    font-size: 14px;
+  }
+}
+.setting-drawer-block-checbox {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 20px;
+
+  .setting-drawer-block-checbox-item {
+    position: relative;
+    margin-right: 16px;
+    border-radius: 2px;
+    cursor: pointer;
+
+    img {
+      width: 48px;
+      height: 48px;
+    }
+
+    .custom-img {
+      width: 48px;
+      height: 38px;
+      border-radius: 5px;
+      box-shadow: 1px 1px 2px #898484;
+    }
+
+    .setting-drawer-block-checbox-selectIcon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      padding-top: 15px;
+      padding-left: 24px;
+      color: #1890ff;
+      font-weight: 700;
+      font-size: 14px;
+    }
+  }
+}
+
+.drawer-item {
+  padding: 12px 0;
+  font-size: 14px;
+
+  .comp-style {
+    float: right;
+    margin: -3px 8px 0px 0px;
+  }
+}
+</style>
--- a/src/layout/components/Sidebar/Link.vue
+++ b/src/layout/components/Sidebar/Link.vue
@ -0,0 +1,40 @@
+<template>
+  <component :is="type" v-bind="linkProps()">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { isExternal } from '@/utils/validate';
+
+const props = defineProps({
+  to: {
+    type: [String, Object],
+    required: true
+  }
+});
+
+const isExt = computed(() => {
+  return isExternal(props.to as string);
+});
+
+const type = computed(() => {
+  if (isExt.value) {
+    return 'a';
+  }
+  return 'router-link';
+});
+
+function linkProps() {
+  if (isExt.value) {
+    return {
+      href: props.to,
+      target: '_blank',
+      rel: 'noopener'
+    };
+  }
+  return {
+    to: props.to
+  };
+}
+</script>
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@ -0,0 +1,95 @@
+<template>
+  <div
+    class="sidebar-logo-container"
+    :class="{ collapse: collapse }"
+    :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"
+  >
+    <transition :enter-active-class="proxy?.animate.logoAnimate.enter" mode="out-in">
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">
+          {{ title }}
+        </h1>
+      </router-link>
+      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">
+          {{ title }}
+        </h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import variables from '@/assets/styles/variables.module.scss';
+import logo from '@/assets/logo/logo.png';
+import { useSettingsStore } from '@/store/modules/settings';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+defineProps({
+  collapse: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const title = ref('RuoYi-Vue-Plus');
+const settingsStore = useSettingsStore();
+const sideTheme = computed(() => settingsStore.sideTheme);
+</script>
+
+<style lang="scss" scoped>
+.sidebarLogoFade-enter-active {
+  transition: opacity 1.5s;
+}
+
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  background: #2b2f3a;
+  text-align: center;
+  overflow: hidden;
+
+  & .sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+
+    & .sidebar-logo {
+      width: 32px;
+      height: 32px;
+      vertical-align: middle;
+      margin-right: 12px;
+    }
+
+    & .sidebar-title {
+      display: inline-block;
+      margin: 0;
+      color: #fff;
+      font-weight: 600;
+      line-height: 50px;
+      font-size: 14px;
+      font-family:
+        Avenir,
+        Helvetica Neue,
+        Arial,
+        Helvetica,
+        sans-serif;
+      vertical-align: middle;
+    }
+  }
+
+  &.collapse {
+    .sidebar-logo {
+      margin-right: 0px;
+    }
+  }
+}
+</style>
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@ -0,0 +1,101 @@
+<template>
+  <div v-if="!item.hidden">
+    <template v-if="hasOneShowingChild(item, item.children) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
+          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
+          <template #title>
+            <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span>
+          </template>
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
+      <template v-if="item.meta" #title>
+        <svg-icon :icon-class="item.meta ? item.meta.icon : ''" />
+        <span class="menu-title" :title="hasTitle(item.meta?.title)">{{ item.meta?.title }}</span>
+      </template>
+
+      <sidebar-item
+        v-for="(child, index) in item.children"
+        :key="child.path + index"
+        :is-nest="true"
+        :item="child"
+        :base-path="resolvePath(child.path)"
+        class="nest-menu"
+      />
+    </el-sub-menu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { isExternal } from '@/utils/validate';
+import AppLink from './Link.vue';
+import { getNormalPath } from '@/utils/ruoyi';
+import { RouteRecordRaw } from 'vue-router';
+
+const props = defineProps({
+  item: {
+    type: Object as PropType<RouteRecordRaw>,
+    required: true
+  },
+  isNest: {
+    type: Boolean,
+    default: false
+  },
+  basePath: {
+    type: String,
+    default: ''
+  }
+});
+
+const onlyOneChild = ref<any>({});
+
+const hasOneShowingChild = (parent: RouteRecordRaw, children?: RouteRecordRaw[]) => {
+  if (!children) {
+    children = [];
+  }
+  const showingChildren = children.filter((item) => {
+    if (item.hidden) {
+      return false;
+    }
+    onlyOneChild.value = item;
+    return true;
+  });
+
+  // When there is only one child router, the child router is displayed by default
+  if (showingChildren.length === 1) {
+    return true;
+  }
+
+  // Show parent if there are no child router to display
+  if (showingChildren.length === 0) {
+    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true };
+    return true;
+  }
+
+  return false;
+};
+
+const resolvePath = (routePath: string, routeQuery?: string): any => {
+  if (isExternal(routePath)) {
+    return routePath;
+  }
+  if (isExternal(props.basePath as string)) {
+    return props.basePath;
+  }
+  if (routeQuery) {
+    const query = JSON.parse(routeQuery);
+    return { path: getNormalPath(props.basePath + '/' + routePath), query: query };
+  }
+  return getNormalPath(props.basePath + '/' + routePath);
+};
+
+const hasTitle = (title: string | undefined): string => {
+  if (!title || title.length <= 5) {
+    return '';
+  }
+  return title;
+};
+</script>
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@ -0,0 +1,55 @@
+<template>
+  <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: bgColor }">
+    <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
+      <transition :enter-active-class="proxy?.animate.menuSearchAnimate.enter" mode="out-in">
+        <el-menu
+          :default-active="activeMenu"
+          :collapse="isCollapse"
+          :background-color="bgColor"
+          :text-color="textColor"
+          :unique-opened="true"
+          :active-text-color="theme"
+          :collapse-transition="false"
+          mode="vertical"
+        >
+          <sidebar-item v-for="(r, index) in sidebarRouters" :key="r.path + index" :item="r" :base-path="r.path" />
+        </el-menu>
+      </transition>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Logo from './Logo.vue';
+import SidebarItem from './SidebarItem.vue';
+import variables from '@/assets/styles/variables.module.scss';
+import { useAppStore } from '@/store/modules/app';
+import { useSettingsStore } from '@/store/modules/settings';
+import { usePermissionStore } from '@/store/modules/permission';
+import { RouteRecordRaw } from 'vue-router';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const route = useRoute();
+const appStore = useAppStore();
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
+const sidebarRouters = computed<RouteRecordRaw[]>(() => permissionStore.getSidebarRoutes());
+const showLogo = computed(() => settingsStore.sidebarLogo);
+const sideTheme = computed(() => settingsStore.sideTheme);
+const theme = computed(() => settingsStore.theme);
+const isCollapse = computed(() => !appStore.sidebar.opened);
+
+const activeMenu = computed(() => {
+  const { meta, path } = route;
+  // if set path, the sidebar will highlight the path you set
+  if (meta.activeMenu) {
+    return meta.activeMenu;
+  }
+  return path;
+});
+
+const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground));
+const textColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor));
+</script>
--- a/src/layout/components/SocialCallback/index.vue
+++ b/src/layout/components/SocialCallback/index.vue
@ -0,0 +1,95 @@
+<template>
+  <div v-loading="loading" class="social-callback"></div>
+</template>
+
+<script setup lang="ts">
+import { login, callback } from '@/api/login';
+import { setToken, getToken } from '@/utils/auth';
+import { LoginData } from '@/api/types';
+
+const route = useRoute();
+const loading = ref(true);
+
+/**
+ * 接收Route传递的参数
+ * @param {Object} route.query.
+ */
+const code = route.query.code as string;
+const state = route.query.state as string;
+const source = route.query.source as string;
+const stateJson = JSON.parse(atob(state));
+const tenantId = (stateJson.tenantId as string) ? (stateJson.tenantId as string) : '000000';
+const domain = stateJson.domain as string;
+
+const processResponse = async (res: any) => {
+  if (res.code !== 200) {
+    throw new Error(res.msg);
+  }
+  if (res.data !== null) {
+    setToken(res.data.access_token);
+  }
+  ElMessage.success(res.msg);
+  setTimeout(() => {
+    location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
+  }, 2000);
+};
+
+const handleError = (error: any) => {
+  ElMessage.error(error.message);
+  setTimeout(() => {
+    location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
+  }, 2000);
+};
+
+const callbackByCode = async (data: LoginData) => {
+  try {
+    const res = await callback(data);
+    await processResponse(res);
+    loading.value = false;
+  } catch (error) {
+    handleError(error);
+  }
+};
+
+const loginByCode = async (data: LoginData) => {
+  try {
+    const res = await login(data);
+    await processResponse(res);
+    loading.value = false;
+  } catch (error) {
+    handleError(error);
+  }
+};
+
+const init = async () => {
+  // 如果域名不相等 则重定向处理
+  const host = window.location.host;
+  if (domain !== host) {
+    const urlFull = new URL(window.location.href);
+    urlFull.host = domain;
+    window.location.href = urlFull.toString();
+    return;
+  }
+
+  const data: LoginData = {
+    socialCode: code,
+    socialState: state,
+    tenantId: tenantId,
+    source: source,
+    clientId: import.meta.env.VITE_APP_CLIENT_ID,
+    grantType: 'social'
+  };
+
+  if (!getToken()) {
+    await loginByCode(data);
+  } else {
+    await callbackByCode(data);
+  }
+};
+
+onMounted(() => {
+  nextTick(() => {
+    init();
+  });
+});
+</script>
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@ -0,0 +1,102 @@
+<template>
+  <el-scrollbar ref="scrollContainerRef" :vertical="false" class="scroll-container" @wheel.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script setup lang="ts">
+import { RouteLocationNormalized } from 'vue-router';
+import { useTagsViewStore } from '@/store/modules/tagsView';
+
+const tagAndTagSpacing = ref(4);
+
+const scrollContainerRef = ref<ElScrollbarInstance>();
+const scrollWrapper = computed(() => scrollContainerRef.value?.$refs.wrapRef);
+
+onMounted(() => {
+  scrollWrapper.value?.addEventListener('scroll', emitScroll, true);
+});
+onBeforeUnmount(() => {
+  scrollWrapper.value?.removeEventListener('scroll', emitScroll);
+});
+
+const handleScroll = (e: WheelEvent) => {
+  const eventDelta = (e as any).wheelDelta || -e.deltaY * 40;
+  const $scrollWrapper = scrollWrapper.value;
+  $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;
+};
+const emits = defineEmits(['scroll']);
+const emitScroll = () => {
+  emits('scroll');
+};
+
+const tagsViewStore = useTagsViewStore();
+const visitedViews = computed(() => tagsViewStore.visitedViews);
+
+const moveToTarget = (currentTag: RouteLocationNormalized) => {
+  const $container = scrollContainerRef.value?.$el;
+  const $containerWidth = $container.offsetWidth;
+  const $scrollWrapper = scrollWrapper.value;
+
+  let firstTag = null;
+  let lastTag = null;
+
+  // find first tag and last tag
+  if (visitedViews.value.length > 0) {
+    firstTag = visitedViews.value[0];
+    lastTag = visitedViews.value[visitedViews.value.length - 1];
+  }
+
+  if (firstTag === currentTag) {
+    $scrollWrapper.scrollLeft = 0;
+  } else if (lastTag === currentTag) {
+    $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
+  } else {
+    const tagListDom: any = document.getElementsByClassName('tags-view-item');
+    const currentIndex = visitedViews.value.findIndex((item) => item === currentTag);
+    let prevTag = null;
+    let nextTag = null;
+
+    for (const k in tagListDom) {
+      if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
+        if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
+          prevTag = tagListDom[k];
+        }
+        if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
+          nextTag = tagListDom[k];
+        }
+      }
+    }
+
+    // the tag's offsetLeft after of nextTag
+    const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value;
+
+    // the tag's offsetLeft before of prevTag
+    const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value;
+    if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+      $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth;
+    } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+      $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft;
+    }
+  }
+};
+
+defineExpose({
+  moveToTarget
+});
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  :deep(.el-scrollbar__bar) {
+    bottom: 0px;
+  }
+  :deep(.el-scrollbar__wrap) {
+    height: 49px;
+  }
+}
+</style>
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@ -0,0 +1,342 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
+      <router-link
+        v-for="tag in visitedViews"
+        :key="tag.path"
+        :data-path="tag.path"
+        :class="{ 'active': isActive(tag), 'has-icon': tagsIcon }"
+        :to="{ path: tag.path ? tag.path : '', query: tag.query, fullPath: tag.fullPath ? tag.fullPath : '' }"
+        class="tags-view-item"
+        :style="activeStyle(tag)"
+        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
+        @contextmenu.prevent="openMenu(tag, $event)"
+      >
+        <svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon"/>
+        {{ tag.title }}
+        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
+          <close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
+        </span>
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em" /> 刷新页面</li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em" /> 关闭当前</li>
+      <li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em" /> 关闭其他</li>
+      <li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em" /> 关闭左侧</li>
+      <li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em" /> 关闭右侧</li>
+      <li @click="closeAllTags(selectedTag)"><circle-close style="width: 1em; height: 1em" /> 全部关闭</li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ScrollPane from './ScrollPane.vue';
+import { getNormalPath } from '@/utils/ruoyi';
+import { useSettingsStore } from '@/store/modules/settings';
+import { usePermissionStore } from '@/store/modules/permission';
+import { useTagsViewStore } from '@/store/modules/tagsView';
+import { RouteRecordRaw, RouteLocationNormalized } from 'vue-router';
+
+const visible = ref(false);
+const top = ref(0);
+const left = ref(0);
+const selectedTag = ref<RouteLocationNormalized>();
+const affixTags = ref<RouteLocationNormalized[]>([]);
+const scrollPaneRef = ref<InstanceType<typeof ScrollPane>>();
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const route = useRoute();
+const router = useRouter();
+
+const visitedViews = computed(() => useTagsViewStore().getVisitedViews());
+const routes = computed(() => usePermissionStore().getRoutes());
+const theme = computed(() => useSettingsStore().theme);
+const tagsIcon = computed(() => useSettingsStore().tagsIcon)
+
+watch(route, () => {
+  addTags();
+  moveToCurrentTag();
+});
+watch(visible, (value) => {
+  if (value) {
+    document.body.addEventListener('click', closeMenu);
+  } else {
+    document.body.removeEventListener('click', closeMenu);
+  }
+});
+
+const isActive = (r: RouteLocationNormalized): boolean => {
+  return r.path === route.path;
+};
+const activeStyle = (tag: RouteLocationNormalized) => {
+  if (!isActive(tag)) return {};
+  return {
+    'background-color': 'var(--tags-view-active-bg)',
+    'border-color': 'var(--tags-view-active-border-color)'
+  };
+};
+const isAffix = (tag: RouteLocationNormalized) => {
+  return tag?.meta && tag?.meta?.affix;
+};
+const isFirstView = () => {
+  try {
+    return selectedTag.value.fullPath === '/index' || selectedTag.value.fullPath === visitedViews.value[1].fullPath;
+  } catch (err) {
+    return false;
+  }
+};
+const isLastView = () => {
+  try {
+    return selectedTag.value.fullPath === visitedViews.value[visitedViews.value.length - 1].fullPath;
+  } catch (err) {
+    return false;
+  }
+};
+const filterAffixTags = (routes: RouteRecordRaw[], basePath = '') => {
+  let tags: RouteLocationNormalized[] = [];
+
+  routes.forEach((route) => {
+    if (route.meta && route.meta.affix) {
+      const tagPath = getNormalPath(basePath + '/' + route.path);
+      tags.push({
+        hash: '',
+        matched: [],
+        params: undefined,
+        query: undefined,
+        redirectedFrom: undefined,
+        fullPath: tagPath,
+        path: tagPath,
+        name: route.name as string,
+        meta: { ...route.meta }
+      });
+    }
+    if (route.children) {
+      const tempTags = filterAffixTags(route.children, route.path);
+      if (tempTags.length >= 1) {
+        tags = [...tags, ...tempTags];
+      }
+    }
+  });
+  return tags;
+};
+const initTags = () => {
+  const res = filterAffixTags(routes.value);
+  affixTags.value = res;
+  for (const tag of res) {
+    // Must have tag name
+    if (tag.name) {
+      useTagsViewStore().addVisitedView(tag);
+    }
+  }
+};
+const addTags = () => {
+  const { name } = route;
+  if (route.query.title) {
+    route.meta.title = route.query.title as string;
+  }
+  if (name) {
+    useTagsViewStore().addView(route as any);
+  }
+};
+const moveToCurrentTag = () => {
+  nextTick(() => {
+    for (const r of visitedViews.value) {
+      if (r.path === route.path) {
+        scrollPaneRef.value?.moveToTarget(r);
+        // when query is different then update
+        if (r.fullPath !== route.fullPath) {
+          useTagsViewStore().updateVisitedView(route);
+        }
+      }
+    }
+  });
+};
+const refreshSelectedTag = (view: RouteLocationNormalized) => {
+  proxy?.$tab.refreshPage(view);
+  if (route.meta.link) {
+    useTagsViewStore().delIframeView(route);
+  }
+};
+const closeSelectedTag = (view: RouteLocationNormalized) => {
+  proxy?.$tab.closePage(view).then(({ visitedViews }: any) => {
+    if (isActive(view)) {
+      toLastView(visitedViews, view);
+    }
+  });
+};
+const closeRightTags = () => {
+  proxy?.$tab.closeRightPage(selectedTag.value).then((visitedViews: RouteLocationNormalized[]) => {
+    if (!visitedViews.find((i: RouteLocationNormalized) => i.fullPath === route.fullPath)) {
+      toLastView(visitedViews);
+    }
+  });
+};
+const closeLeftTags = () => {
+  proxy?.$tab.closeLeftPage(selectedTag.value).then((visitedViews: RouteLocationNormalized[]) => {
+    if (!visitedViews.find((i: RouteLocationNormalized) => i.fullPath === route.fullPath)) {
+      toLastView(visitedViews);
+    }
+  });
+};
+const closeOthersTags = () => {
+  router.push(selectedTag.value).catch(() => {});
+  proxy?.$tab.closeOtherPage(selectedTag.value).then(() => {
+    moveToCurrentTag();
+  });
+};
+const closeAllTags = (view: RouteLocationNormalized) => {
+  proxy?.$tab.closeAllPage().then(({ visitedViews }) => {
+    if (affixTags.value.some((tag) => tag.path === route.path)) {
+      return;
+    }
+    toLastView(visitedViews, view);
+  });
+};
+const toLastView = (visitedViews: RouteLocationNormalized[], view?: RouteLocationNormalized) => {
+  const latestView = visitedViews.slice(-1)[0];
+  if (latestView) {
+    router.push(latestView.fullPath as string);
+  } else {
+    // now the default is to redirect to the home page if there is no tags-view,
+    // you can adjust it according to your needs.
+    if (view?.name === 'Dashboard') {
+      // to reload home page
+      router.replace({ path: '/redirect' + view?.fullPath });
+    } else {
+      router.push('/');
+    }
+  }
+};
+const openMenu = (tag: RouteLocationNormalized, e: MouseEvent) => {
+  const menuMinWidth = 105;
+  const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
+  const offsetWidth = proxy?.$el.offsetWidth; // container width
+  const maxLeft = offsetWidth - menuMinWidth; // left boundary
+  const l = e.clientX - offsetLeft + 15; // 15: margin right
+
+  if (l > maxLeft) {
+    left.value = maxLeft;
+  } else {
+    left.value = l;
+  }
+
+  top.value = e.clientY;
+  visible.value = true;
+  selectedTag.value = tag;
+};
+const closeMenu = () => {
+  visible.value = false;
+};
+const handleScroll = () => {
+  closeMenu();
+};
+
+onMounted(() => {
+  initTags();
+  addTags();
+});
+</script>
+
+<style lang="scss" scoped>
+.tags-view-container {
+  height: 34px;
+  width: 100%;
+  background-color: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-light);
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.12),
+    0 0 3px 0 rgba(0, 0, 0, 0.04);
+  .tags-view-wrapper {
+    .tags-view-item {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      height: 26px;
+      line-height: 23px;
+      background-color: var(--el-bg-color);
+      border: 1px solid var(--el-border-color-light);
+      color: #495060;
+      padding: 0 8px;
+      font-size: 12px;
+      margin-left: 5px;
+      margin-top: 4px;
+      &:hover {
+        color: var(--el-color-primary);
+      }
+      &:first-of-type {
+        margin-left: 15px;
+      }
+      &:last-of-type {
+        margin-right: 15px;
+      }
+      &.active {
+        background-color: #42b983;
+        color: #fff;
+        border-color: #42b983;
+        &::before {
+          content: '';
+          background: #fff;
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          position: relative;
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+  .tags-view-item.active.has-icon::before {
+    content: none !important;
+  }
+  .contextmenu {
+    margin: 0;
+    background: var(--el-bg-color);
+    z-index: 3000;
+    position: absolute;
+    list-style-type: none;
+    padding: 5px 0;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 400;
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+    li {
+      margin: 0;
+      padding: 7px 16px;
+      cursor: pointer;
+      &:hover {
+        background: #eee;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+//reset element css of el-icon-close
+.tags-view-wrapper {
+  .tags-view-item {
+    .el-icon-close {
+      width: 16px;
+      height: 16px;
+      vertical-align: 2px;
+      border-radius: 50%;
+      text-align: center;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      transform-origin: 100% 50%;
+      &:before {
+        transform: scale(0.6);
+        display: inline-block;
+        vertical-align: -3px;
+      }
+      &:hover {
+        background-color: #b4bccc;
+        color: #fff;
+        width: 12px !important;
+        height: 12px !important;
+      }
+    }
+  }
+}
+</style>
--- a/src/layout/components/TopBar/search.vue
+++ b/src/layout/components/TopBar/search.vue
@ -0,0 +1,158 @@
+<template>
+  <div class="layout-search-dialog">
+    <el-dialog v-model="state.isShowSearch" destroy-on-close :show-close="false">
+      <template #footer>
+        <el-autocomplete
+          ref="layoutMenuAutocompleteRef"
+          v-model="state.menuQuery"
+          :fetch-suggestions="menuSearch"
+          placeholder="搜索"
+          :fit-input-width="true"
+          @select="onHandleSelect"
+        >
+          <template #prefix>
+            <svg-icon class-name="search-icon" icon-class="search" />
+          </template>
+          <template #default="{ item }">
+            <div>
+              <svg-icon :icon-class="item.icon" class="mr5" />
+              {{ item.title }}
+            </div>
+          </template>
+        </el-autocomplete>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="layoutBreadcrumbSearch">
+import { getNormalPath } from '@/utils/ruoyi';
+import { isHttp } from '@/utils/validate';
+import { usePermissionStore } from '@/store/modules/permission';
+import { RouteRecordRaw } from 'vue-router';
+type Router = Array<{
+  path: string;
+  icon: string;
+  title: string[];
+}>;
+type SearchState<T = any> = {
+  isShowSearch: boolean;
+  menuQuery: string;
+  menuList: T[];
+};
+// 定义变量内容
+const layoutMenuAutocompleteRef = ref();
+const router = useRouter();
+const routes = computed(() => usePermissionStore().routes);
+const state = reactive<SearchState>({
+  isShowSearch: false,
+  menuQuery: '',
+  menuList: []
+});
+
+// 搜索弹窗打开
+const openSearch = () => {
+  state.menuQuery = '';
+  state.isShowSearch = true;
+  state.menuList = generateRoutes(routes.value as any);
+  nextTick(() => {
+    setTimeout(() => {
+      layoutMenuAutocompleteRef.value.focus();
+    });
+  });
+};
+// 搜索弹窗关闭
+const closeSearch = () => {
+  state.isShowSearch = false;
+};
+// 菜单搜索数据过滤
+const menuSearch = (queryString: string, cb: (options: any[]) => void) => {
+  const options = state.menuList.filter((item) => {
+    return item.title.indexOf(queryString) > -1;
+  });
+  cb(options);
+};
+
+// Filter out the routes that can be displayed in the sidebar
+// And generate the internationalized title
+const generateRoutes = (routes: RouteRecordRaw[], basePath = '', prefixTitle: string[] = []) => {
+  let res: Router = [];
+  routes.forEach((r) => {
+    // skip hidden router
+    if (!r.hidden) {
+      const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
+      const data: any = {
+        path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
+        icon: r.meta?.icon,
+        title: [...prefixTitle]
+      };
+      if (r.meta && r.meta.title) {
+        data.title = [...data.title, r.meta.title];
+        if (r.redirect !== 'noRedirect') {
+          // only push the routes with title
+          // special case: need to exclude parent router without redirect
+          res.push(data);
+        }
+      }
+      // recursive child routes
+      if (r.children) {
+        const tempRoutes = generateRoutes(r.children, data.path, data.title);
+        if (tempRoutes.length >= 1) {
+          res = [...res, ...tempRoutes];
+        }
+      }
+    }
+  });
+  res.forEach((item: any) => {
+    if (item.title instanceof Array) {
+      item.title = item.title.join('/');
+    }
+  });
+  return res;
+};
+// 当前菜单选中时
+const onHandleSelect = (val: any) => {
+  const paths = val.path;
+  if (isHttp(paths)) {
+    // http(s):// 路径新窗口打开
+    const pindex = paths.indexOf('http');
+    window.open(paths.substring(pindex, paths.length), '_blank');
+  } else {
+    router.push(paths);
+  }
+  state.menuQuery = '';
+  closeSearch();
+};
+
+// 暴露变量
+defineExpose({
+  openSearch
+});
+</script>
+
+<style lang="scss" scoped>
+.layout-search-dialog {
+  position: relative;
+  :deep(.el-dialog) {
+    padding: 0;
+    .el-dialog__header,
+    .el-dialog__body {
+      display: none;
+    }
+    .el-dialog__footer {
+      width: 100%;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: -53vh;
+    }
+  }
+  :deep(.el-autocomplete) {
+    width: 560px;
+    position: absolute;
+    top: 150px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+</style>
--- a/src/layout/components/index.ts
+++ b/src/layout/components/index.ts
@ -0,0 +1,4 @@
+export { default as AppMain } from './AppMain.vue';
+export { default as Navbar } from './Navbar.vue';
+export { default as Settings } from './Settings/index.vue';
+export { default as TagsView } from './TagsView/index.vue';
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@ -0,0 +1,130 @@
+<template>
+  <div v-loading="state.loading" class="layout-navbars-breadcrumb-user-news">
+    <div class="head-box">
+      <div class="head-box-title">通知公告</div>
+      <div class="head-box-btn" @click="readAll">全部已读</div>
+    </div>
+    <div v-loading="state.loading" class="content-box">
+      <template v-if="newsList.length > 0">
+        <div v-for="(v, k) in newsList" :key="k" class="content-box-item" @click="onNewsClick(k)">
+          <div class="item-conten">
+            <div>{{ v.message }}</div>
+            <div class="content-box-msg"></div>
+            <div class="content-box-time">{{ v.time }}</div>
+          </div>
+          <!-- 已读/未读 -->
+          <span v-if="v.read" class="el-tag el-tag--success el-tag--mini read">已读</span>
+          <span v-else class="el-tag el-tag--danger el-tag--mini read">未读</span>
+        </div>
+      </template>
+      <el-empty v-else :description="'消息为空'"></el-empty>
+    </div>
+    <div v-if="newsList.length > 0" class="foot-box" @click="onGoToGiteeClick">前往gitee</div>
+  </div>
+</template>
+
+<script setup lang="ts" name="layoutBreadcrumbUserNews">
+import { useNoticeStore } from '@/store/modules/notice';
+
+const noticeStore = useNoticeStore();
+const { readAll } = useNoticeStore();
+
+// 定义变量内容
+const state = reactive({
+  loading: false
+});
+const newsList = ref([]) as any;
+
+/**
+ * 初始化数据
+ * @returns
+ */
+const getTableData = async () => {
+  state.loading = true;
+  newsList.value = noticeStore.state.notices;
+  state.loading = false;
+};
+
+//点击消息，写入已读
+const onNewsClick = (item: any) => {
+  newsList.value[item].read = true;
+  //并且写入pinia
+  noticeStore.state.notices = newsList.value;
+};
+
+// 前往通知中心点击
+const onGoToGiteeClick = () => {
+  window.open('https://gitee.com/dromara/RuoYi-Vue-Plus/tree/5.X/');
+};
+
+onMounted(() => {
+  nextTick(() => {
+    getTableData();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.layout-navbars-breadcrumb-user-news {
+  .head-box {
+    display: flex;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    box-sizing: border-box;
+    color: var(--el-text-color-primary);
+    justify-content: space-between;
+    height: 35px;
+    align-items: center;
+    .head-box-btn {
+      color: var(--el-color-primary);
+      font-size: 13px;
+      cursor: pointer;
+      opacity: 0.8;
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+  .content-box {
+    height: 300px;
+    overflow: auto;
+    font-size: 13px;
+    .content-box-item {
+      padding-top: 12px;
+      display: flex;
+      &:last-of-type {
+        padding-bottom: 12px;
+      }
+      .content-box-msg {
+        color: var(--el-text-color-secondary);
+        margin-top: 5px;
+        margin-bottom: 5px;
+      }
+      .content-box-time {
+        color: var(--el-text-color-secondary);
+      }
+      .item-conten {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+  .foot-box {
+    height: 35px;
+    color: var(--el-color-primary);
+    font-size: 13px;
+    cursor: pointer;
+    opacity: 0.8;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top: 1px solid var(--el-border-color-lighter);
+    &:hover {
+      opacity: 1;
+    }
+  }
+  :deep(.el-empty__description p) {
+    font-size: 13px;
+  }
+}
+</style>
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -0,0 +1,135 @@
+<template>
+  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <side-bar v-if="!sidebar.hide" class="sidebar-container" />
+    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+      <!-- <el-scrollbar>
+        <div :class="{ 'fixed-header': fixedHeader }">
+          <navbar ref="navbarRef" @setLayout="setLayout" />
+          <tags-view v-if="needTagsView" />
+        </div>
+        <app-main />
+        <settings ref="settingRef" />
+      </el-scrollbar> -->
+      <div :class="{ 'fixed-header': fixedHeader }">
+        <navbar ref="navbarRef" @set-layout="setLayout" />
+        <tags-view v-if="needTagsView" />
+      </div>
+      <app-main />
+      <settings ref="settingRef" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SideBar from './components/Sidebar/index.vue';
+import { AppMain, Navbar, Settings, TagsView } from './components';
+import { useAppStore } from '@/store/modules/app';
+import { useSettingsStore } from '@/store/modules/settings';
+import { initWebSocket } from '@/utils/websocket';
+import { initSSE } from '@/utils/sse';
+
+const settingsStore = useSettingsStore();
+const theme = computed(() => settingsStore.theme);
+const sidebar = computed(() => useAppStore().sidebar);
+const device = computed(() => useAppStore().device);
+const needTagsView = computed(() => settingsStore.tagsView);
+const fixedHeader = computed(() => settingsStore.fixedHeader);
+
+const classObj = computed(() => ({
+  hideSidebar: !sidebar.value.opened,
+  openSidebar: sidebar.value.opened,
+  withoutAnimation: sidebar.value.withoutAnimation,
+  mobile: device.value === 'mobile'
+}));
+
+const { width } = useWindowSize();
+const WIDTH = 992; // refer to Bootstrap's responsive design
+
+watchEffect(() => {
+  if (device.value === 'mobile') {
+    useAppStore().closeSideBar({ withoutAnimation: false });
+  }
+  if (width.value - 1 < WIDTH) {
+    useAppStore().toggleDevice('mobile');
+    useAppStore().closeSideBar({ withoutAnimation: true });
+  } else {
+    useAppStore().toggleDevice('desktop');
+  }
+});
+
+const navbarRef = ref<InstanceType<typeof Navbar>>();
+const settingRef = ref<InstanceType<typeof Settings>>();
+
+onMounted(() => {
+  nextTick(() => {
+    navbarRef.value?.initTenantList();
+  });
+});
+
+onMounted(() => {
+  const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+  initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + '/resource/websocket');
+});
+
+onMounted(() => {
+  initSSE(import.meta.env.VITE_APP_BASE_API + '/resource/sse');
+});
+
+const handleClickOutside = () => {
+  useAppStore().closeSideBar({ withoutAnimation: false });
+};
+
+const setLayout = () => {
+  settingRef.value?.openSetting();
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/mixin.scss';
+@use '@/assets/styles/variables.module.scss' as *;
+
+.app-wrapper {
+  @include mixin.clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+
+  &.mobile.openSidebar {
+    position: fixed;
+    top: 0;
+  }
+}
+
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
+
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$base-sidebar-width});
+  transition: width 0.28s;
+  background: $fixed-header-bg;
+}
+
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.sidebarHide .fixed-header {
+  width: 100%;
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
+</style>