fix: 修复了逻辑报错时layout布局column排列的问题，关闭非当前tab页不会重定向到末尾tab页

package.json

@@ -45,6 +45,7 @@
     "codemirror": "^6.0.1",
     "driver.js": "^1.3.1",
     "fingerprintjs2": "^2.1.4",
+    "jsbarcode": "^3.11.6",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",

pnpm-lock.yaml

@@ -47,6 +47,9 @@ importers:
       fingerprintjs2:
         specifier: ^2.1.4
         version: 2.1.4
+      jsbarcode:
+        specifier: ^3.11.6
+        version: 3.11.6
       nprogress:
         specifier: ^0.2.0
         version: 0.2.0
@@ -2690,6 +2693,9 @@ packages:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
+  jsbarcode@3.11.6:
+    resolution: {integrity: sha512-G5TKGyKY1zJo0ZQKFM1IIMfy0nF2rs92BLlCz+cU4/TazIc4ZH+X1GYeDRt7TKjrYqmPfTjwTBkU/QnQlsYiuA==}
+
   jsesc@2.5.2:
     resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
     engines: {node: '>=4'}
@@ -6988,6 +6994,8 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
+  jsbarcode@3.11.6: {}
+
   jsesc@2.5.2: {}
 
   json-buffer@3.0.1: {}

src/lang/modules/enUS.ts

@@ -57,6 +57,7 @@ export default {
     ["icon-selector"]: "icon-selector",
     ["user-center"]: "user-center",
     ["fingerprintjs2"]: "fingerprintjs2",
+    ["barcode"]: "barcode",
     ["markdown"]: "Markdown",
     ["directive"]: "directive",
     ["anti-shake"]: "anti-shake",

src/lang/modules/zhCN.ts

@@ -57,6 +57,7 @@ export default {
     ["icon-selector"]: "图标选择器",
     ["user-center"]: "用户中心",
     ["fingerprintjs2"]: "浏览器指纹",
+    ["barcode"]: "条形码",
     ["markdown"]: "Markdown",
     ["directive"]: "自定义指令",
     ["anti-shake"]: "防抖",

src/layout/components/Aside/index copy.vue

@@ -0,0 +1,75 @@
+<template>
+  <div :class="asideDark ? 'aside dark' : 'aside'">
+    <Logo />
+    <a-layout-sider :collapsed="collapsed" breakpoint="xl" class="layout_side" :width="220">
+      <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar"><Menu :route-tree="routeTree" /></a-scrollbar>
+    </a-layout-sider>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Logo from "@/layout/components/Logo/index.vue";
+import Menu from "@/layout/components/Menu/index.vue";
+import { storeToRefs } from "pinia";
+import { useThemeConfig } from "@/store/modules/theme-config";
+import { useRoutesConfigStore } from "@/store/modules/route-config";
+const themeStore = useThemeConfig();
+const { collapsed, asideDark } = storeToRefs(themeStore);
+const routerStore = useRoutesConfigStore();
+const { routeTree } = storeToRefs(routerStore);
+</script>
+
+<style lang="scss" scoped>
+.aside {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.dark {
+  background: #232324;
+}
+.layout_side {
+  flex: 1;
+  overflow: hidden;
+  .scrollbar {
+    height: 100%;
+  }
+}
+
+// 修改左侧滚动条宽度
+:deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {
+  width: 4px;
+  margin-left: 8px;
+}
+
+// 去掉右侧阴影并替换为边线
+:deep(.arco-layout-sider-light) {
+  border-right: $border-1 solid $color-border-2;
+  box-shadow: unset;
+}
+
+// 解决折叠菜单的icon不居中问题
+:deep(.arco-menu-vertical.arco-menu-collapsed) {
+  // 消除icon的自带padding值，并且让元素居中
+  .arco-menu-has-icon {
+    justify-content: center;
+    padding: 0;
+  }
+
+  // 消除icon的自带margin-right值，并且设置icon的padding值以保留icon空隙
+  .arco-menu-icon {
+    padding: 10px 0;
+    margin-right: 0;
+  }
+
+  // 消除title占位
+  .arco-menu-title {
+    display: none;
+  }
+}
+
+// 去掉sider背景
+.arco-layout-sider {
+  background: unset;
+}
+</style>

src/layout/components/Tabs/index.vue

@@ -72,6 +72,7 @@ const onDelete = (key: string) => {
   routerStore.removeTabsList(key);
   routerStore.removeRouteName(key);
   if (tabsList.value.length == 0) return;
+  if (currentRoute.value.name != key) return;
   router.push(tabsList.value.at(-1).path);
 };
 

src/layout/layout-defaults/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-layout class="layout">
+  <a-layout class="layout" :has-sider="true">
     <Aside />
     <a-layout class="layout-right">
       <Header />
@@ -26,6 +26,7 @@ let { isFooter } = storeToRefs(themeStore);
 <style lang="scss" scoped>
 .layout {
   height: 100vh;
+  border: 1px solid red;
 }
 .layout-right {
   display: grid;

src/layout/layout-mixing/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-layout class="layout">
+  <a-layout class="layout" :has-sider="true">
     <div :class="asideDark ? 'aside dark' : 'aside'">
       <Logo />
       <a-layout-sider :collapsed="collapsed" breakpoint="xl" class="layout_side" :width="220">

src/mock/_data/system_menu.ts

@@ -554,6 +554,23 @@ export default [
               icon: "icon-menu",
               sort: 8
             }
+          },
+          {
+            path: "/component/barcode",
+            name: "barcode",
+            component: "component/barcode/barcode",
+            meta: {
+              title: "barcode",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 9
+            }
           }
         ]
       },

src/views/component/barcode/barcode.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="snow-page">
+    <div class="snow-inner">
+      <svg id="imgcode"></svg>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import JsBarcode from "jsbarcode";
+
+const createCode = () => {
+  JsBarcode("#imgcode", "123", {
+    format: "CODE39", //选择要使用的条形码类型
+    width: 3, //设置条之间的宽度
+    height: 100, //高度
+    displayValue: true, //是否在条形码下方显示文字
+    text: "456", //覆盖显示的文本
+    fontOptions: "bold italic", //使文字加粗体或变斜体
+    font: "fantasy", //设置文本的字体
+    textAlign: "left", //设置文本的水平对齐方式
+    textPosition: "top", //设置文本的垂直位置
+    textMargin: 5, //设置条形码和文本之间的间距
+    fontSize: 15, //设置文本的大小
+    background: "#eee", //设置条形码的背景
+    lineColor: "#2196f3", //设置条和文本的颜色。
+    margin: 15 //设置条形码周围的空白边距
+  });
+};
+
+onMounted(() => {
+  createCode();
+});
+</script>
+
+<style lang="scss" scoped></style>

src/views/component/fingerprintjs2/fingerprintjs2.vue

@@ -15,15 +15,19 @@
 <script setup lang="ts">
 import Fingerprint2 from "fingerprintjs2";
 
-const browserInfo = ref<Array[Object]>([]);
+interface IComponents {
+  key: string;
+  value: any;
+}
+const browserInfo = ref<any>([]);
 const getBrowserInfo = () => {
   // 浏览器指纹
-  Fingerprint2.get(components => {
+  Fingerprint2.get((components: any) => {
     // 参数只有回调函数时，默认浏览器指纹依据所有配置信息进行生成
-    const values = components.map(component => component.value); // 配置的值的数组
+    const values = components.map((component: any) => component.value); // 配置的值的数组
     const murmur = Fingerprint2.x64hash128(values.join(""), 31).toUpperCase(); // 生成浏览器指纹
     let arr = [];
-    components.forEach(el => {
+    components.forEach((el: IComponents) => {
       switch (el.key) {
         case "userAgent":
           arr.push({ label: "用户代理(User-Agent)", value: el.value });
@@ -76,16 +80,16 @@ const getBrowserInfo = () => {
   });
 };
 
-const mobileFinger = ref<Array[Object]>([]);
+const mobileFinger = ref<any>([]);
 const getMobileFinger = () => {
-  Fingerprint2.get(components => {
+  Fingerprint2.get((components: any) => {
     // 由于Fingerprint2是通过浏览器设备信息生成的浏览器指纹，
     // 大多数用户不会修改手机配置，同型号产品可能会出现指纹相同，这里需要加上唯一标识
     components.push({
       key: "ip",
       value: "192.168.1.1" //通过接口获取的到ip
     });
-    const values = components.map(component => component.value); // 配置的值的数组
+    const values = components.map((component: any) => component.value); // 配置的值的数组
     const murmur = Fingerprint2.x64hash128(values.join(""), 31).toUpperCase(); // 生成浏览器指纹
     mobileFinger.value.push({ label: "移动设备指纹(需要唯一标识)", value: murmur });
   });

src/vite-env.d.ts

@@ -19,3 +19,4 @@ declare module "@/directives/modules/custom";
 declare module "mockjs";
 declare module "@/store/modules/route-config";
 declare module "@arco-design/*";
+declare module "fingerprintjs2";