v3.15.0【新增】升级SaToken到最新版本;【新增】重磅优化 数据字典;【新增】升级wangEditor-next;【新增】优化缓存实现redis与caffeine

smart-admin-web-javascript/src/layout/components/top-expand-menu/recursion-menu.vue

@@ -39,154 +39,154 @@
   </div>
 </template>
 <script setup>
-import { ref, computed, watch } from 'vue';
-import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
-import SubMenu from './sub-menu.vue';
-import { router } from '/@/router';
-import { useRoute } from 'vue-router';
-import _ from 'lodash';
-import menuEmitter from './top-expand-menu-mitt';
-import { useAppConfigStore } from '/@/store/modules/system/app-config';
-import { useUserStore } from '/@/store/modules/system/user';
-import logoImg from '/@/assets/images/logo/smart-admin-logo.png';
+  import { ref, computed, watch } from 'vue';
+  import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
+  import SubMenu from './sub-menu.vue';
+  import { router } from '/@/router';
+  import { useRoute } from 'vue-router';
+  import _ from 'lodash';
+  import menuEmitter from './top-expand-menu-mitt';
+  import { useAppConfigStore } from '/@/store/modules/system/app-config';
+  import { useUserStore } from '/@/store/modules/system/user';
+  import logoImg from '/@/assets/images/logo/smart-admin-logo.png';
 
-const websiteName = computed(() => useAppConfigStore().websiteName);
-const theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
+  const websiteName = computed(() => useAppConfigStore().websiteName);
+  const theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
 
-const props = defineProps({
-  collapsed: {
-    type: Boolean,
-    default: false,
-  },
-});
+  const props = defineProps({
+    collapsed: {
+      type: Boolean,
+      default: false,
+    },
+  });
 
-//菜单宽度
-const sideMenuWidth = computed(() => useAppConfigStore().$state.sideMenuWidth);
+  //菜单宽度
+  const sideMenuWidth = computed(() => useAppConfigStore().$state.sideMenuWidth);
 
-// 选中的顶级菜单
-let topMenu = ref({});
-menuEmitter.on('selectTopMenu', onSelectTopMenu);
+  // 选中的顶级菜单
+  let topMenu = ref({});
+  menuEmitter.on('selectTopMenu', onSelectTopMenu);
 
-//动态通知顶部菜单栏侧边栏状态
-watch(
-  topMenu,
-  (value) => {
-    let hasSideMenu = value.children && value.children.length > 0;
-    menuEmitter.emit('sideMenuChange', hasSideMenu);
-  },
-  { immediate: true, deep: true }
-);
+  //动态通知顶部菜单栏侧边栏状态
+  watch(
+    topMenu,
+    (value) => {
+      let hasSideMenu = value.children && value.children.length > 0;
+      menuEmitter.emit('sideMenuChange', hasSideMenu);
+    },
+    { immediate: true, deep: true }
+  );
 
-// 监听选中顶级菜单事件
-function onSelectTopMenu(selectedTopMenu) {
-  topMenu.value = selectedTopMenu;
-  if (selectedTopMenu.children && selectedTopMenu.children.length > 0) {
-    openKeys.value = _.map(selectedTopMenu.children, 'menuId').map((e) => e.toString());
-  } else {
-    openKeys.value = [];
+  // 监听选中顶级菜单事件
+  function onSelectTopMenu(selectedTopMenu) {
+    topMenu.value = selectedTopMenu;
+    if (selectedTopMenu.children && selectedTopMenu.children.length > 0) {
+      openKeys.value = _.map(selectedTopMenu.children, 'menuId').map((e) => e.toString());
+    } else {
+      openKeys.value = [];
+    }
+    selectedKeys.value = [];
   }
-  selectedKeys.value = [];
-}
 
-//展开的菜单
-let currentRoute = useRoute();
-const selectedKeys = ref([]);
-const openKeys = ref([]);
+  //展开的菜单
+  let currentRoute = useRoute();
+  const selectedKeys = ref([]);
+  const openKeys = ref([]);
 
-function updateSelectKeyAndOpenKey(parentList, currentSelectKey) {
-  if (!parentList) {
-    return;
+  function updateSelectKeyAndOpenKey(parentList, currentSelectKey) {
+    if (!parentList) {
+      return;
+    }
+    //获取需要展开的menu key集合
+    openKeys.value = _.map(parentList, 'name');
+    selectedKeys.value = [currentSelectKey];
   }
-  //获取需要展开的menu key集合
-  openKeys.value = _.map(parentList, 'name');
-  selectedKeys.value = [currentSelectKey];
-}
 
-watch(
-  currentRoute,
-  (value) => {
-    selectedKeys.value = [value.name];
-  },
-  {
-    immediate: true,
+  watch(
+    currentRoute,
+    (value) => {
+      selectedKeys.value = [value.name];
+    },
+    {
+      immediate: true,
+    }
+  );
+  // 页面跳转
+  function turnToPage(route) {
+    useUserStore().deleteKeepAliveIncludes(route.menuId.toString());
+    router.push({ name: route.menuId.toString() });
   }
-);
-// 页面跳转
-function turnToPage(route) {
-  useUserStore().deleteKeepAliveIncludes(route.menuId.toString());
-  router.push({ name: route.menuId.toString() });
-}
 
-function onGoHome() {
-  router.push({ name: HOME_PAGE_NAME });
-}
+  function onGoHome() {
+    router.push({ name: HOME_PAGE_NAME });
+  }
 
-defineExpose({ updateSelectKeyAndOpenKey });
+  defineExpose({ updateSelectKeyAndOpenKey });
 
-const isLight = computed(() => useAppConfigStore().$state.sideMenuTheme === 'light');
-const color = computed(() => {
-  let isLight = useAppConfigStore().$state.sideMenuTheme === 'light';
-  return {
-    background: isLight ? '#FFFFFF' : '#001529',
-  };
-});
+  const isLight = computed(() => useAppConfigStore().$state.sideMenuTheme === 'light');
+  const color = computed(() => {
+    let isLight = useAppConfigStore().$state.sideMenuTheme === 'light';
+    return {
+      background: isLight ? '#FFFFFF' : '#001529',
+    };
+  });
 </script>
 <style scoped lang="less">
-.recursion-container {
-  height: 100%;
-  background-color: v-bind('color.background');
-}
-
-.min-logo {
-  height: @header-user-height;
-  line-height: @header-user-height;
-  padding: 0px 15px 0px 15px;
-  // background-color: v-bind('color.background');
-
-  width: 80px;
-  z-index: 21;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .logo-img {
-    width: 30px;
-    height: 30px;
-  }
-}
-.top-menu {
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: @header-user-height;
-  font-size: 16px;
-  color: #515a6e;
-  border-bottom: 1px solid #f3f3f3;
-  border-right: 1px solid #f3f3f3;
-}
-.logo {
-  height: @header-user-height;
-  line-height: @header-user-height;
-  padding: 0px 15px 0px 15px;
-  width: 100%;
-  z-index: 100;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-
-  .logo-img {
-    width: 30px;
-    height: 30px;
+  .recursion-container {
+    height: 100%;
+    background-color: v-bind('color.background');
   }
 
-  .title {
-    font-size: 16px;
-    font-weight: 600;
+  .min-logo {
+    height: @header-user-height;
+    line-height: @header-user-height;
+    padding: 0px 15px 0px 15px;
+    // background-color: v-bind('color.background');
+
+    width: 80px;
+    z-index: 21;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .logo-img {
+      width: 30px;
+      height: 30px;
+    }
+  }
+  .top-menu {
     overflow: hidden;
-    word-wrap: break-word;
-    white-space: nowrap;
-    color: v-bind('theme === "light" ? "#001529": "#ffffff"');
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: @header-user-height;
+    font-size: 16px;
+    color: #515a6e;
+    border-bottom: 1px solid #f3f3f3;
+    border-right: 1px solid #f3f3f3;
+  }
+  .logo {
+    height: @header-user-height;
+    line-height: @header-user-height;
+    padding: 0px 15px 0px 15px;
+    width: 100%;
+    z-index: 100;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+
+    .logo-img {
+      width: 30px;
+      height: 30px;
+    }
+
+    .title {
+      font-size: 16px;
+      font-weight: 600;
+      overflow: hidden;
+      word-wrap: break-word;
+      white-space: nowrap;
+      color: v-bind('theme === "light" ? "#001529": "#ffffff"');
+    }
   }
-}
 </style>

smart-admin-web-javascript/src/layout/components/top-expand-menu/sub-menu.vue

@@ -40,7 +40,7 @@
   };
 </script>
 <style scoped lang="less">
-  ::v-deep(.ant-menu-item-selected) {
+  :deep(.ant-menu-item-selected) {
     border-right: 3px !important;
   }
 </style>

smart-admin-web-javascript/src/layout/components/top-expand-menu/top-menu.vue

@@ -25,65 +25,64 @@
   </div>
 </template>
 <script setup>
-import _ from 'lodash';
-import { computed, ref } from 'vue';
-import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
-import { MENU_TYPE_ENUM } from '/@/constants/system/menu-const';
-import { router } from '/@/router';
-import { useAppConfigStore } from '/@/store/modules/system/app-config';
-import { useUserStore } from '/@/store/modules/system/user';
+  import _ from 'lodash';
+  import { computed, ref } from 'vue';
+  import { MENU_TYPE_ENUM } from '/@/constants/system/menu-const';
+  import { router } from '/@/router';
+  import { useAppConfigStore } from '/@/store/modules/system/app-config';
+  import { useUserStore } from '/@/store/modules/system/user';
 
-import menuEmitter from './top-expand-menu-mitt';
+  import menuEmitter from './top-expand-menu-mitt';
 
-const websiteName = computed(() => useAppConfigStore().websiteName);
-const theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
-const menuTree = computed(() => useUserStore().getMenuTree || []);
+  const websiteName = computed(() => useAppConfigStore().websiteName);
+  const theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
+  const menuTree = computed(() => useUserStore().getMenuTree || []);
 
-const props = defineProps({
-  collapsed: {
-    type: Boolean,
-    default: false,
-  },
-});
-// 展开菜单的顶级目录名字适配，只展示两个字为好
-function menuNameAdapter(name) {
-  return name.substr(0, 2);
-}
-
-// 选中的顶级菜单
-const selectedKeys = ref([]);
-
-// 选中菜单，页面跳转
-function onSelectMenu(menuItem) {
-  selectedKeys.value = [menuItem.menuId.toString()];
-  if (menuItem.menuType === MENU_TYPE_ENUM.MENU.value && (_.isEmpty(menuItem.children) || menuItem.children.every((e) => !e.visibleFlag))) {
-    useUserStore().deleteKeepAliveIncludes(menuItem.menuId.toString());
-    router.push({ name: menuItem.menuId.toString() });
+  const props = defineProps({
+    collapsed: {
+      type: Boolean,
+      default: false,
+    },
+  });
+  // 展开菜单的顶级目录名字适配，只展示两个字为好
+  function menuNameAdapter(name) {
+    return name.substr(0, 2);
   }
-  menuEmitter.emit('selectTopMenu', menuItem);
-}
 
-// 更新选中的菜单
-function updateSelectKey(key) {
-  selectedKeys.value = [key];
-  let selectMenu = _.find(menuTree.value, { menuId: Number(key) });
-  if (selectMenu) {
-    menuEmitter.emit('selectTopMenu', selectMenu);
+  // 选中的顶级菜单
+  const selectedKeys = ref([]);
+
+  // 选中菜单，页面跳转
+  function onSelectMenu(menuItem) {
+    selectedKeys.value = [menuItem.menuId.toString()];
+    if (menuItem.menuType === MENU_TYPE_ENUM.MENU.value && (_.isEmpty(menuItem.children) || menuItem.children.every((e) => !e.visibleFlag))) {
+      useUserStore().deleteKeepAliveIncludes(menuItem.menuId.toString());
+      router.push({ name: menuItem.menuId.toString() });
+    }
+    menuEmitter.emit('selectTopMenu', menuItem);
   }
-}
 
-defineExpose({ updateSelectKey });
+  // 更新选中的菜单
+  function updateSelectKey(key) {
+    selectedKeys.value = [key];
+    let selectMenu = _.find(menuTree.value, { menuId: Number(key) });
+    if (selectMenu) {
+      menuEmitter.emit('selectTopMenu', selectMenu);
+    }
+  }
 
-// 动态计算当前导航宽度
-let hasSideMenu = ref(false);
-menuEmitter.on('sideMenuChange', (data) => {
-  hasSideMenu.value = data;
-});
+  defineExpose({ updateSelectKey });
 
-const menuInfo = computed(() => {
-  let width = '100vw';
-  let right = '-100vw';
-  if (hasSideMenu.value) {
+  // 动态计算当前导航宽度
+  let hasSideMenu = ref(false);
+  menuEmitter.on('sideMenuChange', (data) => {
+    hasSideMenu.value = data;
+  });
+
+  const menuInfo = computed(() => {
+    let width = '100vw';
+    let right = '-100vw';
+    if (hasSideMenu.value) {
       if (props.collapsed) {
         width = 'calc(100vw - 80px)';
         right = 'calc(-100vw + 80px)';
@@ -91,60 +90,62 @@ const menuInfo = computed(() => {
         width = 'calc(100vw - 180px)';
         right = 'calc(-100vw + 180px)';
       }
-  }
-  return {
-    width,
-    right,
-  };
-});
+    }
+    return {
+      width,
+      right,
+    };
+  });
 </script>
 <style scoped lang="less">
-.top-menu {
-  position: absolute;
-  transition: all 0.2s, background 0s;
-  top: 0;
-  right: v-bind('menuInfo.right');
-  width: v-bind('menuInfo.width');
-  flex-shrink: 0;
-}
-.ant-menu-dark {
-  background: #1677ff;
-  color: #fff;
-}
-.ant-menu-light {
-  background: #1677ff;
-  color: #fff;
-}
-::v-deep(.ant-menu-item-selected) {
-  background: #0958d9 !important;
-  color: #fff !important;
-}
-.top-menu-container {
-  height: 100%;
-}
-.logo {
-  height: @header-user-height;
-  line-height: @header-user-height;
-  padding: 0px 15px 0px 15px;
-  width: 100%;
-  z-index: 100;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-
-  .logo-img {
-    width: 30px;
-    height: 30px;
+  .top-menu {
+    position: absolute;
+    transition:
+      all 0.2s,
+      background 0s;
+    top: 0;
+    right: v-bind('menuInfo.right');
+    width: v-bind('menuInfo.width');
+    flex-shrink: 0;
   }
-
-  .title {
-    font-size: 16px;
-    font-weight: 600;
-    overflow: hidden;
-    word-wrap: break-word;
-    white-space: nowrap;
-    color: v-bind('theme === "light" ? "#001529": "#ffffff"');
+  .ant-menu-dark {
+    background: #1677ff;
+    color: #fff;
+  }
+  .ant-menu-light {
+    background: #1677ff;
+    color: #fff;
+  }
+  :deep(.ant-menu-item-selected){
+    background: #0958d9 !important;
+    color: #fff !important;
+  }
+  .top-menu-container {
+    height: 100%;
+  }
+  .logo {
+    height: @header-user-height;
+    line-height: @header-user-height;
+    padding: 0px 15px 0px 15px;
+    width: 100%;
+    z-index: 100;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+
+    .logo-img {
+      width: 30px;
+      height: 30px;
+    }
+
+    .title {
+      font-size: 16px;
+      font-weight: 600;
+      overflow: hidden;
+      word-wrap: break-word;
+      white-space: nowrap;
+      color: v-bind('theme === "light" ? "#001529": "#ffffff"');
+    }
   }
-}
 </style>